Update Web IDE documentation with recent changes

- Add file finder docs
- Updated commit panel docs and screenshot

2 files changed, 18 insertions, 5 deletions

diff --git a/doc/user/project/web_ide/img/commit_changes.png b/doc/user/project/web_ide/img/commit_changes.png
index b6fcbf699aa..a5364c12760 100644
--- a/doc/user/project/web_ide/img/commit_changes.png
+++ b/doc/user/project/web_ide/img/commit_changes.png
diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index b7064b83c4e..105d8a6ab61 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -13,15 +13,27 @@ and from merge requests.
 
 ![Open Web IDE](img/open_web_ide.png)
 
-## Commit changes
+## File finder
 
-Changed files are shown on the right in the commit panel. All changes are
-automatically staged. To commit your changes, add a commit message and click
-the 'Commit Button'.
+> [Introduced in](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/18323) [GitLab Core][ce] 10.8.
+
+The file finder allows you to quickly open files in the current branch by
+searching. The file finder is launched using the keyboard shortcut `Command-p`,
+`Control-p`, or `t` (when editor is not in focus). Type the filename or
+file path fragments to start seeing results.
+
+## Stage and commit changes
+
+After making your changes, click the Commit button in the bottom left to
+review the list of changed files. Click on each file to review the changes and
+click the tick icon to stage the file. 
+
+Once you have staged some changes, you can add a commit message and commit the
+staged changes. Unstaged changes will not be commited.
 
 ![Commit changes](img/commit_changes.png)
 
-## Comparing changes
+## Reviewing changes
 
 Before you commit your changes, you can compare them with the previous commit
 by switching to the review mode or selecting the file from the staged files
@@ -30,4 +42,5 @@ list.
 An additional review mode is available when you open a merge request, which
 shows you a preview of the merge request diff if you commit your changes.
 
+[ce]: https://about.gitlab.com/pricing/
 [ee]: https://about.gitlab.com/pricing/