Add visual mode to the tutorial

src/static/clippy/1-tutor.md

@@ -10,7 +10,7 @@ It will not cover advanced topics. For those, [`:help`](../docs/modules/_src_exc
 
 ## Basics
 
-The idea behind Tridactyl is to allow you to navigate the web more efficiently with just the keyboard. Tridactyl turns Firefox into a modal browser, meaning it has several different modes of operation, like Vim. Each tab can only ever be in one mode at a time and each of these modes could have a wildly different operation. You can think of it a bit like a Transformer, if you like. There are four main modes you will want to be familiar with:
+The idea behind Tridactyl is to allow you to navigate the web more efficiently with just the keyboard. Tridactyl turns Firefox into a modal browser, meaning it has several different modes of operation, like Vim. Each tab can only ever be in one mode at a time and each of these modes could have a wildly different operation. You can think of it a bit like a Transformer, if you like. There are five main modes you will want to be familiar with:
 
 -   Normal mode
     -   This mode is used for navigating around single pages and starting other modes.
@@ -20,6 +20,9 @@ The idea behind Tridactyl is to allow you to navigate the web more efficiently w
     -   This is most often used for following links, but it has many other submodes.
     -   You can enter this mode with `f` and exit it with `Escape` or `Enter`.
     -   Hint characters are displayed as uppercase letters, but you should type the lowercase letter.
+-   Visual mode
+    -   This mode allows you to select text on the web page and copy it to the clipboard or search for it using `s` and `S`.
+    -   You can enter this mode with `v`, by selecting text with the mouse, `;h` hint mode, `/` searching or by using Firefox's "caret" mode on `F7` and exit it with `Escape` or `Ctrl-[`.
 -   Command mode ("ex-mode")
     -   This mode allows you to execute more complicated commands by typing them out manually.
     -   It is commonly used for binding keys and accessing help.

src/static/clippy/3-hint_mode.md

@@ -14,4 +14,4 @@ If there is ever only a single hint remaining (for example, because you have wit
 
 Some hints have their tags (the labels which show which characters to press to activate them) in grey in the default theme. These correspond to elements which have JavaScript mouse events attached to them. If an element has a grey and a red hint tag next to it, pick the red one as this is almost always the correct tag.
 
-The [next page](./4-command_mode.html) will cover the command mode. <a href='./2-normal_mode.html' rel="prev"></a>
+The [next page](./3.5-visual_mode.html) will cover the visual mode. <a href='./2-normal_mode.html' rel="prev"></a>

src/static/clippy/3.5-visual-mode.md

@@ -0,0 +1,25 @@
+# Visual mode
+
+"visual" mode is by default entered whenever non-text-area text is selected and left whenever it is deselected. It can be manually entered with
+-   `v`
+-   by using the mouse to select text
+-   by selecting text with `;h` hint mode
+-   by searching with `/`
+-   using Firefox's "caret" mode on `F7`
+
+The default behaviour can be modified with ":set visual{enter,exit}auto {true,false}".
+
+The visual mode keybinds:
+
+-   Text selection using common movement keys:
+    -   `h`,`j`,`k`,`l`,`e`,`w`,`b` moves the cursor and expands or reduces the selection
+    -   `0` expands or reduces the selection to the beginning of the line
+    -   `$` expands or reduces the selection to the end of the line
+    -   `=` expands the selection successively until the whole web page is selected
+    -   `o` moves the (invisible) cursor to the other end of the selection
+-   `y` yanks selected text to the clipboard
+-   `s` and `S` searches for selected text
+
+See ":help vmaps" to see all the binds. To make it easier to enter this mode, "v" and ";h" enter a "highlight element" hint mode.
+
+The [next page](./4-command_mode.html) will cover the command mode. <a href='./3-hint_mode.html' rel="prev"></a>

src/static/clippy/4-command_mode.md

@@ -18,4 +18,4 @@ We support a handful of keybinds in the console:
 *   `Ctrl-F` to complete the command from command history
 *   `Space` to insert the URL of the highlighted completion into the command line
 
-The [next page](./5-settings.html) will talk about the various settings available. <a href='./3-hint_mode.html' rel="prev"></a>
+The [next page](./5-settings.html) will talk about the various settings available. <a href='./3.5-visual_mode.html' rel="prev"></a>