Move "show-advanced-options" to a button.

3 files changed, 8 insertions, 11 deletions

diff --git a/pages/options.coffee b/pages/options.coffee
index d2950348..5a4a93ab 100644
--- a/pages/options.coffee
+++ b/pages/options.coffee
@@ -208,14 +208,13 @@ initOptionsPage = ->
       (event) ->
         if advancedMode
           $("advancedOptions").style.display = "none"
-          $("advancedOptionsLink").innerHTML = "Show advanced options…"
+          $("advancedOptionsButton").innerHTML = "Show Advanced Options"
         else
           $("advancedOptions").style.display = "table-row-group"
-          $("advancedOptionsLink").innerHTML = "Hide advanced options"
+          $("advancedOptionsButton").innerHTML = "Hide Advanced Options"
         advancedMode = !advancedMode
+        $("advancedOptionsButton").blur()
         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
@@ -228,7 +227,7 @@ initOptionsPage = ->
     $("saveOptions").innerHTML = "No Changes"
 
   $("saveOptions").addEventListener "click", saveOptions
-  $("advancedOptionsLink").addEventListener "click", toggleAdvancedOptions
+  $("advancedOptionsButton").addEventListener "click", toggleAdvancedOptions
   $("showCommands").addEventListener "click", activateHelpDialog
   $("filterLinkHints").addEventListener "click", maintainLinkHintsView
 
diff --git a/pages/options.css b/pages/options.css
index 5b098c8f..8d1014dc 100644
--- a/pages/options.css
+++ b/pages/options.css
@@ -136,7 +136,7 @@ input#searchUrl {
 }
 #buttonsPanel { width: 100%; }
 #advancedOptions { display: none; }
-#advancedOptionsLink { line-height: 24px; }
+#advancedOptionsButton { width: 170px; }
 .help {
   position: absolute;
   right: -320px;
diff --git a/pages/options.html b/pages/options.html
index 889d5ea0..777d514a 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -66,9 +66,6 @@ b: http://b.com/?q=%s description
               <textarea id="searchEngines"></textarea>
           </td>
         </tr>
-        <tr>
-           <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>
@@ -246,12 +243,13 @@ b: http://b.com/?q=%s description
           <tr>
             <td id="footerTableData">
               <span id="helpText">
-                Type <strong>?</strong> to show the Vimium help dialog.
+                Type <strong>?</strong> to show the help dialog.
                 <br/>
                 Type <strong>Ctrl-Enter</strong> to save <i>all</i> options.
               </span>
             </td>
-            <td id="saveOptionsTableData">
+            <td id="saveOptionsTableData" nowrap>
+              <button id="advancedOptionsButton">Show Advanced Options</button>
               <button id="saveOptions" disabled="true">No Changes</button>
             </td>
           </tr>