Rework the help dialog styling.

We make the help dialog iframe cover most of the height of the window,
but only be as wide as it needs to be.

Like this, the user can click to the side of the dialog (on the options
page) to enter bindings in the custom ley mapping input, with the help
dialog open.

2 files changed, 67 insertions, 64 deletions

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index f902363c..516859e2 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -137,18 +137,22 @@ div.vimiumHighlightedFrame {
 
 /* Help Dialog CSS */
 
+/* The help dialog iframe covers most of the height of the window, but is only
+ * as wide as it needs to be; so clicking to the left or right of it is
+ * clicking outside of the iframe. */
 iframe.vimiumHelpDialogFrame {
   background-color: transparent;
   padding: 0px;
-  overflow: hidden;
 
   display: block;
   position: fixed;
-  width: 100%;
-  min-width: 400px;
-  height: 100%;
-  top: 0px;
-  left: 0px;
+  /* The width of div#vimiumHelpDialog, plus twice its padding and twice its border. */
+  width: calc(640px + 24px + 4px);
+  height: calc(100% - 100px); /* 100% minus 2 * top. */
+  top: 50px;
+  left: 50%;
+  /* This needs to be 1/2 the width to horizontally center the dialog */
+  margin-left:-320px;
   border: none;
 
   /* One less than hint markers. */
@@ -163,15 +167,12 @@ div#vimiumHelpDialog {
   border:2px solid #b3b3b3;
   border-radius:6px;
   padding:8px 12px;
-  top:50px;
-  left:50%;
+  top:0px;
+  left:0px;
   width:640px;
-  max-height: calc(100% - 100px - 16px); /* 100% - 2*top - 2*padding for top/bottom */
-  /* This needs to be 1/2 width to horizontally center the help dialog */
-  margin-left:-320px;
+  max-height: calc(100% - 24px); /* 100% - twice the padding. */
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
-  overflow-x: auto;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 div#vimiumHelpDialog a { color:blue; }
diff --git a/pages/help_dialog.html b/pages/help_dialog.html
index b51aef9c..0696bc12 100644
--- a/pages/help_dialog.html
+++ b/pages/help_dialog.html
@@ -15,60 +15,62 @@
 
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-    <div id="vimiumHelpDialog" class="vimiumReset">
-      <a class="vimiumReset optionsPage" href="#">Options</a>
-      <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
-      <a class="vimiumReset closeButton" href="#">&times;</a>
-      <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
-      <div class="vimiumReset vimiumColumn">
-        <table class="vimiumReset">
-          <thead class="vimiumReset">
-            <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
-          </thead>
-          <tbody id="help-dialog-pageNavigation" class="vimiumReset">
-          </tbody>
-        </table>
-      </div>
-      <div class="vimiumReset vimiumColumn">
-        <table class="vimiumReset" >
-          <thead class="vimiumReset">
-          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
-          </thead>
-          <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody>
-          <thead class="vimiumReset">
-          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
-          </thead>
-          <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody>
-          <thead class="vimiumReset">
-          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
-          </thead>
-          <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody>
-          <thead class="vimiumReset">
-          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
-          </thead>
-          <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody>
-          <thead class="vimiumReset">
-          <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
-          </thead>
-          <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
-        </table>
-      </div>
+    <div id="vimiumHelpDialogContainer" class="vimiumReset">
+      <div id="vimiumHelpDialog">
+        <a class="vimiumReset optionsPage" href="#">Options</a>
+        <a class="vimiumReset wikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a>
+        <a class="vimiumReset closeButton" href="#">&times;</a>
+        <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></div>
+        <div class="vimiumReset vimiumColumn">
+          <table class="vimiumReset">
+            <thead class="vimiumReset">
+              <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
+            </thead>
+            <tbody id="help-dialog-pageNavigation" class="vimiumReset">
+            </tbody>
+          </table>
+        </div>
+        <div class="vimiumReset vimiumColumn">
+          <table class="vimiumReset" >
+            <thead class="vimiumReset">
+            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using the vomnibar</td></tr>
+            </thead>
+            <tbody class="vimiumReset" id="help-dialog-vomnibarCommands"></tbody>
+            <thead class="vimiumReset">
+            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
+            </thead>
+            <tbody class="vimiumReset" id="help-dialog-findCommands"></tbody>
+            <thead class="vimiumReset">
+            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
+            </thead>
+            <tbody class="vimiumReset" id="help-dialog-historyNavigation"></tbody>
+            <thead class="vimiumReset">
+            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
+            </thead>
+            <tbody class="vimiumReset" id="help-dialog-tabManipulation"></tbody>
+            <thead class="vimiumReset">
+            <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
+            </thead>
+            <tbody class="vimiumReset" id="help-dialog-misc"></tbody>
+          </table>
+        </div>
 
-      <br clear="both"/>
-      <div class="vimiumReset vimiumDivider"></div>
+        <br clear="both"/>
+        <div class="vimiumReset vimiumDivider"></div>
 
-      <div id="vimiumHelpDialogFooter" class="vimiumReset">
-        <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
+        <div id="vimiumHelpDialogFooter" class="vimiumReset">
+          <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
 
-        <div class="vimiumReset vimiumColumn">
-          Enjoying Vimium?
-          <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
-              feedback</a>.<br/>
-          Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
-        </div>
-        <div class="vimiumReset vimiumColumn" style="text-align:right">
-          <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
-          <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+          <div class="vimiumReset vimiumColumn">
+            Enjoying Vimium?
+            <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+                feedback</a>.<br/>
+            Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
+          </div>
+          <div class="vimiumReset vimiumColumn" style="text-align:right">
+            <span class="vimiumReset">Version <span id="help-dialog-version"></span></span><br/>
+            <a href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a>
+          </div>
         </div>
       </div>
     </div>