I like it over all as I can at least skip over pesky folders like migrations, I just wish I could make the project navigation panel wider or horizontal scroll in it, when you prefix all your file names the same way, you have no clue how to jump to a specific file.

@kbrock

There is one already

Would be very helpful to be able to navigate between files with up and down arrow buttons.

Would make scanning through big PRs easier and faster.

Regarding the "hide" indicator @jgmuchiri screenshotted, if that could be included on the panel as you scroll down, so you can hide or show it while you're deep in reviewing the code without having to lose your place, that would be awesome.

thx

Dance Madi

Let's Dance!!!

Great addition!
Very awesome feature to Github!

This is a great addition serves a great deal for reviewing in an organised fashion.

Now if only it flagged security issues in files by marking them in red for when someone tries to introduce a new security issue in pr.

i like it

its awesome

The files listed on the right side are in a different order than in the tree list. So lining up the background highlight wouldn't work, unless you change the ordering to match

Maybe a bold font for the file that you are currently seeing? Instead of that little vertical bar.

totally needed, it is confusing to scroll on the right while the tree not reflecting the currently reviewed file.

Agreed. Makes a lot of sense to somehow highlight (with enhanced font or foreground)

+1 for this. +several in fact.

It's frustrating trying to visually parse a file tree that is crammed into a fixed width, narrow width column, combined with excess padding and overly large fonts. Even when full-screening a PR on a 40" monitor, there's no dynamic break point to increase the width, it still sits on the left as a tiny vertical slice of truncated file titles, with a mountain of unused space to the right.

Being able to resize will mitigate this, but it will be clunky, and there'd be less pressure to resize if the space was used more efficiently, and if the width scaled more sensibly with the window size.

The file tree font and layout is bigger than the code itself, and bigger than the file trees on every other tool I have open (Fork, IntelliJ, VSCode, MacOS Finder).

Fixed with is a pain. I have 4K screen with a bunch of space and I can't see full file names :-(

I think he meant to say the fixed width LHS is painful on a 4K screen because he has a bunch of space, yet can't expand the LHS to read the full file names without truncated text. I also share this pain.

This LHS panel for the code view is awesome. I wish the PR view was the same as the regular code view.

@zsiswick exactly
@matuhinal I would love to be able to drag and change the width of the LHS. Easier to work with PR when you see full file names.

I'm seeing this too. If I dismiss the notification banner, it works as expected, but I think it should also show the first files even if I haven't dismissed the notification.

Yes, this happened to me too.

Strangely, now I'm seeing the opposite: the per-file top-bar is getting hidden under the PR top-bar:

To explain the image a bit more, the top-bar that has the "Viewed" check box is partially hidden by the PR top-bar and will continue to scroll out of view. At least for this "summary" view of all files*, I would expect the top-bars to remain unobscured until the entire file has scrolled out of view.

* On that note, with the folder view, why load all files? For large PRs, the file folders help go to a specific view, but page load and performance still suffers.

I noticed some odd behavior when all of the files are collapsed. If you click a filename, the page will try to infinitely scroll until you change focus by clicking anywhere else on the screen.

EDIT: Don't do this anymore, they added some weird JS that detects an "original top" and using this style adjustment creates excess padding

I came to report exactly this. The height of the sticky sidebar is getting updated correctly when there's a notification but it's top value is not respecting the extra height added by the notification.

Using something like Stylus you can add this CSS rule and it get's fixed perfectly.

.notification-shelf ~ .application-main .hx_Layout--sidebar {
  top: 128px;
}

I wrote a Tampermonkey script to enhance the tree view with several features. I just added comment counts and published it today: https://greasyfork.org/en/scripts/442885-better-github-pull-requests

Please incorporate this. Microsoft Azure DevOps has a nice visualization for this. Having used that as well. It makes a really measurable difference in productivity, especially on teams or commits with more than just a handful of files.. Comments become much more discoverable and the are shown in-context.

Simple Example below.

This suggestion is worth a comment to say "me too!". Especially looking for a "has comments" and a "has unresponded to" comments kind of indicator. Love the feature so far <3.

it is better to show how many comment in the file and how many have been resolved as follows

Yes, it would be good to be able to differentiate between files with comments and files with unread comments. Also, it would be great to have a way to page through comments groups rapidly.

On 4k+ resolutions, it would be great to be able to drag the tree container to make it bigger for accommodation of big file names

To all commenting about fixed width: browser window is resizable, so you can scale it down if 100% width is a problem. Achieving 100% width (which I wanted even though I work on a 27" QHD monitor) when there's a fixed (pixel!), on the other hand, is not possible without browser plugins & CSS hacking (which I did before 100% width was there).

As a user with an ultrawide monitor, I can't agree more with the suggestion to unlock the width. I built this bookmarklet to allow me to double the width of the column (which is okay as a fixed size for me), but something easily draggable with memory between reloads would obviously be much more valuable. Barring that, a config setting to say "my preferred fixed size is $x px" would be a big step in the right direction and probably much easy to code in.

@rafaelrenanpacheco This could be a case of user error. Why would you do code review that isn't side by side on a 4K screen? Would you read google search results like that? Last thing I would want is for them to artificially narrow the screen because of a comment like this.

You want to have the full path in general, in my experience, but there is no room for it if you stick it next to the diff.
Instead, can it be small bar at the left (eg for overview), and when you move the mouse to the left over it, a popup that covers say up to 1/2 the screen width? That would give you the space for everything

In other code review tools I have used, I have been able to toggle the view of the file tree on or off based on a hotkey, for example "f".

@meysam101

The current icon is a bit too small for purpose (and also only shows at the top for me, not when scrolling no, wait, it's there). Better discoverability would be nice - maybe just make it a touch bigger? A highlight wouldn't hurt either, it gets lost in all the other graphical box borders.

An additional config option to auto-collapse would be a nice pair to a keyboard shortcut to show/hide.

Overall a nice improvement!

I do not have the ability to hide it. I don't find it useful for large commits. It's just noise.

UX: Struggled to find the icon to show/hide file tree.
On a 1450 px browser window, can't see 76 cols side by side with the file tree on.
Suggestion: reformat the default file tree with so you can still do 76 cols side by side diff?

Great idea!

Great idea! I think that a checkmark ✔️ with an eye 👁️ will be nice.
Something like this (which I'm not sure if is allowed to be embedded here)

I would love to be able to mark file as viewed directly in the tree as well.

It looks like adding this style does the trick

li[data-file-user-viewed] {
    opacity: .5;
}

Marking the folders as viewed when all files in that subtree are viewed would help continuing reviews quicker.
Also the comment markers with open/all count could appear on the collapsed folders if any file under that subtree has comments.
And when the folder is open the aggregated info should be hidden and the files and subfolders should show the relevant data instead.

+1 for diff stats

+1 for diff stats. I agree that it would be helpful to easily find which files contain major changes.

Would also like for the search bar to be anchored like in the extension, so you won't have to scroll to the top of the file list to search it.

+1 for indication that there are comments on the file.

• indication that there are comments on the file

In addition to comments I would love to have an indicator for check annotations as well (or whatever they are called, see the picture for an example).

Second that! Commits tab and commits comparison as well! 👍

+1 Please add support for commit-by-commit reviews. I love how @berzniz handles it in his chrome extension.

I'm seeing it in the commit by commit review but only when the commit contains more than 1 file.

Yes! I jumped here to add this exact feedback. Love this feature, and was hoping there would be some way to quickly reference or copy the commit SHA in the tree. But since there can be any number of commits to a file, it seems this could be offered as a file tree feature in the commits tab. Or via some way to cross-reference them in filtered files-changed to changes-from-commit.

A sweet version of that sync might be to have some detail in the file-info tab header that links the file to its commit history within the current PR.

+1 for icons

Thanks for the feedback. We're looking into this.

Amazing feature indeed! I see that clicking a second time makes the page do a weird jumpy (to top of page and back) thing on my system. It keeps the highlight and stays positioned correctly though.

okoko

Really want to be able to change the width of the file tree, we have large filenames that are cutoff, and so there may be half a dozen files that have the same leading characters that are cutoff and I can't tell which is which without clicking. Having full file name in tooltips is also desirable when it's truncated.

An option to view only file selected in the tree

I would like to have this feature as well 👍

Maybe have a splitter that allows tree width to be reduced/increased?

👍 + an option to hide id completely. My use case is portrait oriented monitors, 1080x1920 (WxH).

an option to hide id completely

the option is there, just a row higher than I expected it. maybe by the search entry?

The option to change the font size in the tree would be useful

@willsmythe I think support for narrow window and saving state should be separate features.

Currently when the diff is in "Split" view, the filetree hides only when width is under ~1000px. This makes it unreadable between 1000px - 1200px range. (I presume numbers may vary by browser or device 😄)
With Split diff view the filetree should probably hide when window width is around ~1200px.

Same issue i felt

It's beneficial to review code quickly and perfectly

Agree with nickvanw, default tree to hidden, or allow me to default it to hidden via a global setting.

+1 to this.
File Tree is an awesome feature 🎉, but I don't need it all the time (sometimes I need more space to view the code changes in split view). Ability to hide/unhide it with a simple toggle button and keeping the last setting in memory would help a lot.

indeed! Please do!