helpDialog.html

<!--
  This is shown when typing "?". This HTML is loaded by the background page and then populated with the
  latest keybindings information before displaying.
-->
<div id="vimiumHelpDialog">
  <style>
    #vimiumHelpDialog * {
      font-size:11px;
      line-height:130%;
      color:black;
      background-color:transparent;
    }
    #vimiumHelpDialog {
      text-align:left;
      border:3px solid red;
      opacity:0.92;
      background-color:#eee;
      position:fixed;
      width:600px;
      font-family:helvetica, arial, sans;
      border:2px solid #b3b3b3;
      border-radius:6px;
      padding:8px 12px;
      width:640px;
      left:50%;
      /* This needs to be 1/2 width to horizontally center the help dialog */
      margin-left:-320px;
      top:50px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
      z-index:99999998;
    }
    #vimiumHelpDialog a { color:blue; }
    #vimiumTitle, #vimiumTitle * { font-size:20px; }
    .vimiumColumn {
      width:50%;
      float:left;
    }
    .vimiumColumn table, .vimiumColumn td, .vimiumColumn tr { padding:0; margin:0; }
    .vimiumColumn table { width:100%; table-layout:auto; }
    .vimiumColumn td { vertical-align:top; padding:1px; }
    #vimiumHelpDialog .vimiumColumn tr > td:first-of-type {
      text-align:right;
      font-weight:bold;
      color:#2f508e;
      white-space:nowrap;
    }
    /* Make the description column as wide as it can be. */
    #vimiumHelpDialog .vimiumColumn tr > td:nth-of-type(3) { width:100%; }
    #vimiumHelpDialog .vimiumDivider {
      height:1px;
      width:92%;
      margin:10px auto;
      background-color:#9a9a9a;
    }
    #vimiumHelpDialog .vimiumHelpSectionTitle {
      font-weight:bold;
      padding-top:3px;
    }
    #vimiumHelpDialog .commandName { font-family:"courier new"; }
    /* Advanced commands are hidden by default until you show them. */
    #vimiumHelpDialog .advanced { display: none; }
    #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; }
    #vimiumHelpDialog .closeButton {
      position:absolute;
      right:10px;
      top:5px;
      font-family:"courier new";
      font-weight:bold;
      color:#555;
      text-decoration:none;
      padding-left:10px;
      font-size:16px;
    }
    #vimiumHelpDialog a.optionsPage {
      position: absolute;
      right: 60px;
      top: 8px;
    }
    #vimiumHelpDialog .closeButton:hover {
      color:black;
      cursor:default;
      -webkit-user-select:none;
    }
    #vimiumHelpDialogFooter { position: relative; }
    #vimiumHelpDialogFooter * { font-size:10px; }
    #vimiumHelpDialogFooter .toggleAdvancedCommands {
      position: absolute;
      right: 2px;
      top: -34px;
    }
  </style>

  <!-- 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. -->
  <a class="optionsPage" href="#">Options</a>
  <a class="closeButton" href="#">x</a>
  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
  <div class="vimiumColumn">
    <table>
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>
      {{pageNavigation}}
    </table>
  </div>
  <div class="vimiumColumn">
    <table>
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Using find</td></tr>
      {{findCommands}}
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating history</td></tr>
      {{historyNavigation}}
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Manipulating tabs</td></tr>
      {{tabManipulation}}
      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Miscellaneous</td></tr>
      {{misc}}
    </table>
  </div>

  <br clear="both"/>
  <div class="vimiumDivider"></div>

  <div id="vimiumHelpDialogFooter">
    <a href="#" class="toggleAdvancedCommands">Show advanced commands</a>

    <div class="vimiumColumn">
      Enjoying Vimium?
      <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
          feedback</a>.<br/>
      Found a bug? <a href="http://github.com/philc/vimium/issues">Report it here</a>.
    </div>
    <div class="vimiumColumn" style="text-align:right">
      <span>Version {{version}}</span><br/>
    </div>
  </div>

  <script>
    VimiumHelpDialog = {
      // This setting is pulled out of local storage. It's false by default.
      advancedCommandsVisible: {{showAdvancedCommands}},

      init: function() {
        this.dialogElement = document.getElementById("vimiumHelpDialog");
        this.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", 
          VimiumHelpDialog.toggleAdvancedCommands, false);
        this.showAdvancedCommands(this.advancedCommandsVisible);
      },

      /*
       * Advanced commands are hidden by default so they don't overwhelm new and casual users.
       */
      toggleAdvancedCommands: function(event) {
        event.preventDefault();
        VimiumHelpDialog.advancedCommandsVisible = !VimiumHelpDialog.advancedCommandsVisible;
        chrome.extension.sendRequest({ handler: "saveHelpDialogSettings",
            showAdvancedCommands: VimiumHelpDialog.advancedCommandsVisible });
        VimiumHelpDialog.showAdvancedCommands(VimiumHelpDialog.advancedCommandsVisible);
      },

      showAdvancedCommands: function(visible) {
        VimiumHelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML =
            visible ? "Hide advanced commands" : "Show advanced commands";
        var advanced = VimiumHelpDialog.dialogElement.getElementsByClassName("advanced");
        for (var i = 0; i < advanced.length; i++)
          advanced[i].style.display = (visible ? "table-row" : "none");
      }
    };

    VimiumHelpDialog.init();
  </script>
</div>