Merge remote-tracking branch 'smblott-github/option-for-options-page'

Conflicts:
	pages/options.html

1 files changed, 122 insertions, 65 deletions

diff --git a/pages/options.html b/pages/options.html
index 84953023..b52974d6 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;
@@ -112,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%;
       }
@@ -141,20 +133,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,34 +165,84 @@
       }
       /* 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;
         overflow-x: hidden;
         overflow-y: auto;
-        height: 170px;
-        border: 1px solid #bfbfbf;
+        max-height: 135px;
+        min-height: 75px;
         border-radius: 2px;
         color: #444;
+        width: 100%
       }
-      input.pattern, input.passKeys {
+      #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%;
+      }
+      .exclusionRulePassKeys {
+        width: 33%;
+      }
+      .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;
         font-size: 14px;
       }
-      .pattern {
-        width: 250px;
-      }
-      .passKeys {
-        width: 120px;
+      .exclusionHeaderText {
+        padding-left: 3px;
+        color: #979ca0;
       }
       #exclusionAddButton {
         float: right;
-        margin-top: 5px;
         margin-right: 0px;
+        margin-top: 5px;
+      }
+      #footer {
+        background: #f5f5f5;
+        border-top: 1px solid #979ca0;
+        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 {
+        font-size: 12px;
+      }
+      #saveOptionsTableData {
+        float: right;
+      }
+      #saveOptions {
+        white-space: nowrap;
+        width: 110px;
       }
     </style>
 
@@ -224,24 +259,28 @@
           <td>
             <div class="help">
               <div class="example">
-                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.
                 <br/><br/>
-                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).
               </div>
             </div>
             <div>
                <div id="exclusionScrollBox">
-                  <table id="exclusionRules"></table>
+                  <table id="exclusionRules">
+                     <tr>
+                        <td><span class="exclusionHeaderText">Patterns</span></td>
+                        <td><span class="exclusionHeaderText">Keys</span></td>
+                     </tr>
+                  </table>
                   <template id="exclusionRuleTemplate">
-                    <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>
-                    </tr>
+                     <tr class="exclusionRuleTemplateInstance">
+                        <td><input/ type="text" class="pattern" placeholder="URL pattern"></td>
+                        <td class="exclusionRulePassKeys"><input/ type="text" class="passKeys" placeholder="Exclude keys"></td>
+                        <td class="exclusionRemoveButton">
+                          <input/ type="button" tabindex = "-1" class="exclusionRemoveButtonButton" value="&#x2716;"></td>
+                     </tr>
                   </template>
                </div>
                <button id="exclusionAddButton">Add Rule</button>
@@ -283,22 +322,17 @@ unmapAll
           </td>
         </tr>
         <tr>
-          <td class="caption"></td>
-          <td verticalAlign="top" class="booleanOption">
-            <label>
-              <input id="smoothScroll" type="checkbox"/>
-              Use smooth scrolling.
-            </label>
-          </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>
             <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>
@@ -315,7 +349,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">
@@ -327,6 +361,15 @@ unmapAll
             </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">
@@ -364,7 +407,7 @@ unmapAll
               </div>
               <label>
                 <input id="regexFindMode" type="checkbox"/>
-                Treat find queries as regular expressions.
+                Treat find queries as regular expressions
               </label>
             </td>
           </tr>
@@ -433,14 +476,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>