Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
178 lines (167 sloc) 6.08 KB
<!--
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);
this.centerDialog();
},
/*
* 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);
VimiumHelpDialog.centerDialog();
},
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");
},
centerDialog: function() {
var zoomFactor = currentZoomLevel / 100.0;
this.dialogElement.style.top = Math.max(
(window.innerHeight - this.dialogElement.clientHeight * zoomFactor) / 2.0,
20) / zoomFactor + "px";
}
};
VimiumHelpDialog.init();
</script>
</div>