Navigate repo with a file tree

Description

A file tree view has been requested quite a number of times ("Especially the file tree view is simply a must-have for navigation" via Reddit) and was even implemented by the community as a browser extension Octotree.

Unfortunately this extension no longer works for GitLab due to design changes, nor did it support private GitLab projects.

Community expectations were also set that Octotree functionality would be integrated into GitLab in https://gitlab.com/gitlab-org/gitlab-ce/issues/13723

A version of this has been partially implemented within https://gitlab.com/gitlab-org/gitlab-ce/issues/31890 (pre-alpha accessible by creating a cookie new_repo with the value true).

Proposal

Implement a file tree view in the file list to make browsing and reading files in the web interface easier. It should:

  1. allow the sub-directories to be expanded and collapsed as a file tree
  2. show the file tree while viewing a file (apologies for my awful mockup with the two vertical nav bars)
  3. show the file tree while editing a file

file-list

file-view

Links / references

Documentation blurb

Overview

A file tree view will makes it easier to browse the contents of a repository, a common task, reducing the need to pull a projects source code locally simply to read it.

This feature will provide a persistent file tree view that allows the repositories contents to be browsed as a tree, and provide an improved navigation experience because the user will not have to switch between the file list and file view, which is disorienting.

Use cases

Thanks @victorwu for enumerating a number of scenarios here: https://gitlab.com/gitlab-org/gitlab-ce/issues/13723#note_24460171

Feature checklist

Make sure these are completed before closing the issue, with a link to the relevant commit.

Edited by James Ramsay (ex-GitLab)