diff options
| -rw-r--r-- | background_scripts/commands.coffee | 40 | ||||
| -rw-r--r-- | background_scripts/main.coffee | 18 | ||||
| -rw-r--r-- | content_scripts/link_hints.coffee | 14 | ||||
| -rw-r--r-- | content_scripts/vimium.css | 138 | ||||
| -rw-r--r-- | pages/help_dialog.coffee | 9 | ||||
| -rw-r--r-- | pages/help_dialog.html | 128 | 
6 files changed, 207 insertions, 140 deletions
| diff --git a/background_scripts/commands.coffee b/background_scripts/commands.coffee index 2999ebfc..184f3bb0 100644 --- a/background_scripts/commands.coffee +++ b/background_scripts/commands.coffee @@ -118,27 +118,26 @@ Commands =      pageNavigation:        ["scrollDown",        "scrollUp", -      "scrollLeft", -      "scrollRight",        "scrollToTop",        "scrollToBottom", -      "scrollToLeft", -      "scrollToRight",        "scrollPageDown",        "scrollPageUp",        "scrollFullPageUp",        "scrollFullPageDown", +      "scrollLeft", +      "scrollRight", +      "scrollToLeft", +      "scrollToRight",        "reload", -      "toggleViewSource",        "copyCurrentUrl",        "openCopiedUrlInCurrentTab",        "openCopiedUrlInNewTab",        "goUp",        "goToRoot",        "enterInsertMode", -      "passNextKey",        "enterVisualMode",        "enterVisualLineMode", +      "passNextKey",        "focusInput",        "LinkHints.activateMode",        "LinkHints.activateModeToOpenInNewTab", @@ -156,32 +155,33 @@ Commands =      vomnibarCommands:        ["Vomnibar.activate",        "Vomnibar.activateInNewTab", -      "Vomnibar.activateTabSelection",        "Vomnibar.activateBookmarks",        "Vomnibar.activateBookmarksInNewTab", +      "Vomnibar.activateTabSelection",        "Vomnibar.activateEditUrl",        "Vomnibar.activateEditUrlInNewTab"]      findCommands: ["enterFindMode", "performFind", "performBackwardsFind"]      historyNavigation:        ["goBack", "goForward"]      tabManipulation: -      ["nextTab", +      ["createTab",        "previousTab", +      "nextTab",        "visitPreviousTab",        "firstTab",        "lastTab", -      "createTab",        "duplicateTab", +      "togglePinTab",        "removeTab",        "restoreTab",        "moveTabToNewWindow", -      "togglePinTab",        "closeTabsOnLeft","closeTabsOnRight",        "closeOtherTabs",        "moveTabLeft",        "moveTabRight"]      misc: -      ["showHelp"] +      ["showHelp", +      "toggleViewSource"]    # Rarely used commands are not shown by default in the help dialog or in the README. The goal is to present    # a focused, high-signal set of commands to the new and casual user. Only those truly hungry for more power @@ -192,12 +192,12 @@ Commands =      "moveTabToNewWindow",      "goUp",      "goToRoot", -    "focusInput",      "LinkHints.activateModeWithQueue",      "LinkHints.activateModeToDownloadLink",      "Vomnibar.activateEditUrl",      "Vomnibar.activateEditUrlInNewTab",      "LinkHints.activateModeToOpenIncognito", +    "LinkHints.activateModeToCopyLinkUrl",      "goNext",      "goPrevious",      "Marks.activateCreateMode", @@ -207,6 +207,8 @@ Commands =      "closeTabsOnLeft",      "closeTabsOnRight",      "closeOtherTabs", +    "enterVisualLineMode", +    "toggleViewSource",      "passNextKey"]  defaultKeyMappings = @@ -306,8 +308,8 @@ commandDescriptions =    scrollToLeft: ["Scroll all the way to the left", { noRepeat: true }]    scrollToRight: ["Scroll all the way to the right", { noRepeat: true }] -  scrollPageDown: ["Scroll a page down"] -  scrollPageUp: ["Scroll a page up"] +  scrollPageDown: ["Scroll a half page down"] +  scrollPageUp: ["Scroll a half page up"]    scrollFullPageDown: ["Scroll a full page down"]    scrollFullPageUp: ["Scroll a full page up"] @@ -323,7 +325,7 @@ commandDescriptions =    enterVisualMode: ["Enter visual mode", { noRepeat: true }]    enterVisualLineMode: ["Enter visual line mode", { noRepeat: true }] -  focusInput: ["Focus the first text box on the page. Cycle between them using tab"] +  focusInput: ["Focus the first text input on the page"]    "LinkHints.activateMode": ["Open a link in the current tab"]    "LinkHints.activateModeToOpenInNewTab": ["Open a link in a new tab"] @@ -370,16 +372,16 @@ commandDescriptions =    moveTabLeft: ["Move tab to the left", { background: true }]    moveTabRight: ["Move tab to the right", { background: true }] -  "Vomnibar.activate": ["Open URL, bookmark, or history entry", { topFrame: true }] -  "Vomnibar.activateInNewTab": ["Open URL, bookmark, history entry, in a new tab", { topFrame: true }] +  "Vomnibar.activate": ["Open URL, bookmark or history entry", { topFrame: true }] +  "Vomnibar.activateInNewTab": ["Open URL, bookmark or history entry in a new tab", { topFrame: true }]    "Vomnibar.activateTabSelection": ["Search through your open tabs", { topFrame: true }]    "Vomnibar.activateBookmarks": ["Open a bookmark", { topFrame: true }]    "Vomnibar.activateBookmarksInNewTab": ["Open a bookmark in a new tab", { topFrame: true }]    "Vomnibar.activateEditUrl": ["Edit the current URL", { topFrame: true }]    "Vomnibar.activateEditUrlInNewTab": ["Edit the current URL and open in a new tab", { topFrame: true }] -  nextFrame: ["Cycle forward to the next frame on the page", { background: true }] -  mainFrame: ["Select the tab's main/top frame", { topFrame: true, noRepeat: true }] +  nextFrame: ["Select the next frame on the page", { background: true }] +  mainFrame: ["Select the page's main/top frame", { topFrame: true, noRepeat: true }]    "Marks.activateCreateMode": ["Create a new mark", { noRepeat: true }]    "Marks.activateGotoMode": ["Go to a mark", { noRepeat: true }] diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee index 3e1cc0a3..dca9df7e 100644 --- a/background_scripts/main.coffee +++ b/background_scripts/main.coffee @@ -91,6 +91,7 @@ getHelpDialogHtml = ({showUnboundCommands, showCommandNames, customTitle}) ->    replacementStrings =      version: currentVersion      title: customTitle || "Help" +    tip: if showCommandNames then "Tip: click command names to yank them to the clipboard." else " "    for own group of Commands.commandGroups      replacementStrings[group] = @@ -106,11 +107,12 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,      showUnboundCommands, showCommandNames) ->    html = []    for command in Commands.commandGroups[group] -    bindings = (commandsToKey[command] || [""]).join(", ") +    keys = commandsToKey[command] || [] +    bindings = ("<span class='vimiumHelpDialogKey'>#{Utils.escapeHtml key}</span>" for key in keys).join ", "      if (showUnboundCommands || commandsToKey[command])        isAdvanced = Commands.advancedCommands.indexOf(command) >= 0        description = availableCommands[command].description -      if bindings.length < 12 +      if keys.join(", ").length < 12          helpDialogHtmlForCommand html, isAdvanced, bindings, description, showCommandNames, command        else          # If the length of the bindings is too long, then we display the bindings on a separate row from the @@ -122,11 +124,11 @@ helpDialogHtmlForCommandGroup = (group, commandsToKey, availableCommands,  helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommandNames, command) ->    html.push "<tr class='vimiumReset #{"advanced" if isAdvanced}'>"    if description -    html.push "<td class='vimiumReset'>", Utils.escapeHtml(bindings), "</td>" -    html.push "<td class='vimiumReset'>#{if description and bindings then ':' else ''}</td><td class='vimiumReset'>", description -    html.push("<span class='vimiumReset commandName'>(#{command})</span>") if showCommandNames +    html.push "<td class='vimiumReset'>#{bindings}</td>" +    html.push "<td class='vimiumReset'></td><td class='vimiumReset vimiumHelpDescription'>", description +    html.push("(<span class='vimiumReset commandName'>#{command}</span>)") if showCommandNames    else -    html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", Utils.escapeHtml(bindings) +    html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", bindings    html.push("</td></tr>")  # Cache "content_scripts/vimium.css" in chrome.storage.local for UI components. @@ -364,10 +366,10 @@ HintCoordinator =      for own frameId, port of @tabState[tabId].ports        @postMessage tabId, parseInt(frameId), messageType, port, request -  prepareToActivateMode: (tabId, originatingFrameId, {modeIndex}) -> +  prepareToActivateMode: (tabId, originatingFrameId, {modeIndex, isVimiumHelpDialog}) ->      @tabState[tabId] = {frameIds: frameIdsForTab[tabId][..], hintDescriptors: {}, originatingFrameId, modeIndex}      @tabState[tabId].ports = extend {}, portsForTab[tabId] -    @sendMessage "getHintDescriptors", tabId, {modeIndex} +    @sendMessage "getHintDescriptors", tabId, {modeIndex, isVimiumHelpDialog}    # Receive hint descriptors from all frames and activate link-hints mode when we have them all.    postHintDescriptors: (tabId, frameId, {hintDescriptors}) -> diff --git a/content_scripts/link_hints.coffee b/content_scripts/link_hints.coffee index 56a3d75e..0f2425c3 100644 --- a/content_scripts/link_hints.coffee +++ b/content_scripts/link_hints.coffee @@ -70,18 +70,26 @@ HintCoordinator =      # place, then Vimium blocks.  As a temporary measure, we install a timer to remove it.      Utils.setTimeout 1000, -> suppressKeyboardEvents.exit() if suppressKeyboardEvents?.modeIsActive      @onExit = [onExit] -    @sendMessage "prepareToActivateMode", modeIndex: availableModes.indexOf mode +    @sendMessage "prepareToActivateMode", +      modeIndex: availableModes.indexOf(mode), isVimiumHelpDialog: window.isVimiumHelpDialog    # Hint descriptors are global.  They include all of the information necessary for each frame to determine    # whether and when a hint from *any* frame is selected.  They include the following properties:    #   frameId: the frame id of this hint's local frame    #   localIndex: the index in @localHints for the full hint descriptor for this hint    #   linkText: the link's text for filtered hints (this is null for alphabet hints) -  getHintDescriptors: ({modeIndex}) -> +  getHintDescriptors: ({modeIndex, isVimiumHelpDialog}) ->      # Ensure that the document is ready and that the settings are loaded.      DomUtils.documentReady => Settings.onLoaded =>        requireHref = availableModes[modeIndex] in [COPY_LINK_URL, OPEN_INCOGNITO] -      @localHints = LocalHints.getLocalHints requireHref +      # If link hints is launched within the help dialog, then we only offer hints from that frame.  This +      # improves the usability of the help dialog on the options page (particularly for selecting command +      # names). +      @localHints = +        if isVimiumHelpDialog and not window.isVimiumHelpDialog +          [] +        else +          LocalHints.getLocalHints requireHref        @localHintDescriptors = @localHints.map ({linkText}, localIndex) -> {frameId, localIndex, linkText}        @sendMessage "postHintDescriptors", hintDescriptors: @localHintDescriptors diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css index f902363c..8803fd15 100644 --- a/content_scripts/vimium.css +++ b/content_scripts/vimium.css @@ -138,47 +138,50 @@ div.vimiumHighlightedFrame {  /* Help Dialog CSS */  iframe.vimiumHelpDialogFrame { -  background-color: transparent; +  background-color: rgba(10,10,10,0.6);    padding: 0px; -  overflow: hidden; - -  display: block; -  position: fixed; -  width: 100%; -  min-width: 400px; -  height: 100%;    top: 0px;    left: 0px; +  width: 100%; +  height: 100%; +  display: block; +  position: fixed;    border: none; - -  /* One less than hint markers. */ -  z-index: 2147483645; +  z-index: 2147483645; /* One less than hint markers. */  } -div#vimiumHelpDialog { -  border:3px solid red; -  opacity:0.92; -  background-color:#eee; -  position:fixed; +div#vimiumHelpDialogContainer { +  opacity:1.0; +  background-color:white;    border:2px solid #b3b3b3;    border-radius:6px; -  padding:8px 12px; -  top:50px; -  left:50%; -  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; -  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; -  overflow-x: auto; +  width: 840px; +  max-width: calc(100% - 100px); +  max-height: calc(100% - 100px); +  margin: 50px auto;    overflow-y: auto; +  overflow-x: auto; +} + +div#vimiumHelpDialog { +  min-width: 600px; +  padding:8px 12px;  } -div#vimiumHelpDialog a { color:blue; } -div#vimiumTitle, div#vimiumTitle span,  div#vimiumTitle * { font-size:20px; } +span#vimiumTitle, span#vimiumTitle span,  span#vimiumTitle * { font-size:20px; }  #vimiumTitle {    display: block;    line-height: 130%; +  white-space: nowrap; +} +td.vimiumHelpDialogTopButtons { +  width: 100%; +  text-align: right; +} +#helpDialogOptionsPage, #helpDialogWikiPage { +  font-size: 14px; +  padding-left: 5px; +  padding-right: 5px;  }  div.vimiumColumn {    width:50%; @@ -200,57 +203,69 @@ div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; ma  div.vimiumColumn table { width:100%; table-layout:auto; }  div.vimiumColumn td { vertical-align:top; padding:1px; }  div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type { +  /* This is the "key" column, e.g. "j", "gg". */ +  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; +  font-size:14px;    text-align:right; -  font-weight:bold; -  color:#2f508e;    white-space:nowrap;  } +span.vimiumHelpDialogKey { +  background-color: rgb(243,243,243); +  color: rgb(33,33,33); +  margin-left: 2px; +  padding-top: 1px; +  padding-bottom: 1px; +  padding-left: 4px; +  padding-right: 4px; +  border-radius: 3px; +  border: solid 1px #ccc; +  border-bottom-color: #bbb; +  box-shadow: inset 0 -1px 0 #bbb; +  font-family: monospace; +  font-size: 11px; +}  /* Make the description column as wide as it can be. */  div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; }  div#vimiumHelpDialog div.vimiumDivider {    display: block;    height:1px; -  width:92%; +  width:100%;    margin:10px auto;    background-color:#9a9a9a;  }  div#vimiumHelpDialog td.vimiumHelpSectionTitle { -  font-weight:bold;    padding-top:3px; +  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; +  font-size:16px; +  font-weight:bold; +} +div#vimiumHelpDialog td.vimiumHelpDescription { +  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; +  font-size:14px; +} +div#vimiumHelpDialog span.commandName { +  font-style: italic; +  cursor: pointer; +  font-size: 12px;  } -div#vimiumHelpDialog div.commandName { font-family:"courier new"; }  /* Advanced commands are hidden by default until you show them. */  div#vimiumHelpDialog tr.advanced { display: none; }  div#vimiumHelpDialog.showAdvanced tr.advanced { display: table-row; }  div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; }  div#vimiumHelpDialog a.closeButton { -  position:absolute; -  right:7px; -  top:5px;    font-family:"courier new";    font-weight:bold;    color:#555;    text-decoration:none; -  padding-left:10px; -  font-size:20px; +  font-size:24px; +  position: relative; +  top: 3px; +  padding-left: 5px;  }  div#vimiumHelpDialog a {    text-decoration: underline;  } -div#vimiumHelpDialog .wikiPage, div#vimiumHelpDialog .optionsPage { -  position: absolute; -  display: block; -  font-size: 11px; -  line-height: 130%; -  top: 6px; -} -div#vimiumHelpDialog .optionsPage { -  right: 40px; -} -div#vimiumHelpDialog .wikiPage { -  right: 83px; -}  div#vimiumHelpDialog a.closeButton:hover {    color:black;    -webkit-user-select:none; @@ -258,12 +273,27 @@ div#vimiumHelpDialog a.closeButton:hover {  div#vimiumHelpDialogFooter {    display: block;    position: relative; +  margin-bottom: 37px; +} +td.helpDialogBottomRight { +  width:100%; +  float:right; +  text-align: right; +} +td.helpDialogBottomRight, td.helpDialogBottomLeft { +  padding: 0px;  }  div#vimiumHelpDialogFooter * { font-size:10px; } -div#vimiumHelpDialogFooter .toggleAdvancedCommands { -  position: absolute; -  right: 2px; -  top: -34px; +a#toggleAdvancedCommands, span#help-dialog-tip { +  position: relative; +  top: 19px; +  white-space: nowrap; +  font-size: 10px; +} +a:link.vimiumHelDialogLink, a:visited.vimiumHelDialogLink, +  a:hover.vimiumHelDialogLink, a:active.vimiumHelDialogLink, a#toggleAdvancedCommands { +    color:#2f508e; +    text-decoration: underline;  }  /* Vimium HUD CSS */ diff --git a/pages/help_dialog.coffee b/pages/help_dialog.coffee index 401c3222..28aafb4a 100644 --- a/pages/help_dialog.coffee +++ b/pages/help_dialog.coffee @@ -15,11 +15,11 @@ HelpDialog =          clickEvent.preventDefault()          @hide()        false) -    @dialogElement.getElementsByClassName("optionsPage")[0].addEventListener("click", (clickEvent) -> +    document.getElementById("helpDialogOptionsPage").addEventListener("click", (clickEvent) ->          clickEvent.preventDefault()          chrome.runtime.sendMessage({handler: "openOptionsPageInNewTab"})        false) -    @dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].addEventListener("click", +    document.getElementById("toggleAdvancedCommands").addEventListener("click",        HelpDialog.toggleAdvancedCommands, false)      document.documentElement.addEventListener "click", (event) => @@ -38,7 +38,7 @@ HelpDialog =        do (element) ->          element.setAttribute "role", "link"          element.addEventListener "click", -> -          commandName = element.textContent.replace("(","").replace ")", "" +          commandName = element.textContent            chrome.runtime.sendMessage handler: "copyToClipboard", data: commandName            HUD.showForDuration("Yanked #{commandName}.", 2000) @@ -58,7 +58,7 @@ HelpDialog =      Settings.set("helpDialog_showAdvancedCommands", !showAdvanced)    showAdvancedCommands: (visible) -> -    HelpDialog.dialogElement.getElementsByClassName("toggleAdvancedCommands")[0].innerHTML = +    document.getElementById("toggleAdvancedCommands").innerHTML =        if visible then "Hide advanced commands" else "Show advanced commands"      # Add/remove the showAdvanced class to show/hide advanced commands. @@ -82,3 +82,4 @@ UIComponentServer.registerHandler (event) ->  root = exports ? window  root.HelpDialog = HelpDialog +root.isVimiumHelpDialog = true diff --git a/pages/help_dialog.html b/pages/help_dialog.html index 3bfa3e5a..8ac000fb 100644 --- a/pages/help_dialog.html +++ b/pages/help_dialog.html @@ -15,61 +15,85 @@    <!-- 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="#">×</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"> +      <div id="vimiumHelpDialog"> +        <div> +          <table> +            <tr> +              <td> +                <span id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium <span id="help-dialog-title"></span></span> +              </td> +              <td class="vimiumHelpDialogTopButtons"> +                <a class="vimiumReset vimiumHelDialogLink" id="helpDialogOptionsPage" href="#">Options</a> +                <a class="vimiumReset vimiumHelDialogLink" id="helpDialogWikiPage" href="https://github.com/philc/vimium/wiki" target="_blank">Wiki</a> +                <a class="vimiumReset closeButton" href="#">×</a> +              </td> +            </tr> +          </table> +        </div> +        <div class="vimiumReset vimiumDivider"></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> +        <div> +          <table> +            <tr> +              <td class="helpDialogBottomLeft"> +                <span id="help-dialog-tip"></span> +              </td> +              <td class="helpDialogBottomRight vimiumHelDialogLink"> +                <a href="#" id="toggleAdvancedCommands">Show advanced commands</a> +              </td> +            </tr> +          </table> +        </div> -      <div id="vimiumHelpDialogFooter" class="vimiumReset"> -        <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a> +        <br clear="both"/> +        <div class="vimiumReset vimiumDivider"></div> -        <div class="vimiumReset vimiumColumn"> -          Enjoying Vimium? -          <a class="vimiumReset" target="_blank" -          href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb/reviews">Leave us -              feedback</a>.<br/> -          Found a bug? <a class="vimiumReset" target="_blank" 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 target="_blank" href="https://github.com/philc/vimium#release-notes" class="vimiumReset">What's new?</a> +        <div id="vimiumHelpDialogFooter" class="vimiumReset"> +          <div class="vimiumReset vimiumColumn"> +            Enjoying Vimium? +            <a class="vimiumHelDialogLink" target="_blank" +              href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb/reviews">Leave us +                  feedback</a>.<br/> +            Found a bug? <a class="vimiumHelDialogLink" target="_blank" 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" target="_blank" class="vimiumHelDialogLink">What's new?</a> +          </div>          </div>        </div>      </div> | 
