View code and comments side-by-side in pull request "Files changed" page

[vanessa-kalu]

Docked panels for the pull request “Files changed” page are rolling out now.

They let you review code with key pull request context open side-by-side: overview, comments, alerts, and merge status. You can stay in flow without switching tabs or losing your place.

If you're still using the classic "Files changed" page, you'll need to opt into the new experience to view the docked panels from this page. Learn more by checking out our changelog about the new experience.

docked-panels.mp4

💬 Comments panel

View review comments and high-level conversations in one place. You can also add new comments from the panel without navigating away. To open it, click the Comments button in the Files changed toolbar. Learn more in the Comments panel changelog.

ℹ️ Overview panel

Reference the pull request description without leaving your review. This makes it easier to stay oriented in the diff while checking context like goals, implementation notes, or testing instructions. To open it, click the Overview button in the Files changed toolbar. Learn more in the Overview panel changelog.

✅ Merge status panel

Check merge readiness from anywhere in the pull request. Merge status is now available at the top of every pull request page. Click the Merge status button in the pull request header to open the details so you can quickly identify blockers, missing approvals, and get your pull request ready to merge. Learn more in the Merge status changelog.

⚠️ Alerts panel

Review security alerts in the same place you review code. The Alerts panel surfaces code scanning alerts related to changes in the pull request, so you can review findings alongside the diff and take action without leaving your review. To open it, click the Alerts button in the Files changed toolbar.

[IchordeDionysos]

When clicking on the answers to a comment, is it now expanded in the side panel?

Previously, I had way too often the situation that I wanted to go through the comments, clicked on the replies to understand what they said and was send somewhere (and still didn't see the replies)...

I'm not entirely sure when this happened but it may have been comment threads of outdated threads, e.g. after a suggestion of a thread was implemented and thus the thread was no longer attached to a line of the latetst commit.

This is a big annoyance because I want to go through the comments and check if they are still relevant, and check the corresponding code.

[imanmahjoubi]

@IchordeDionysos thank you for your feedback! The team is currently working on this issue and we will push a fix soon.

[Inscure]

@imanmahjoubi please let us know when fix will be arrived. Thank you!

[IchordeDionysos]

I want keyboard shortcuts for marking the current file as "viewed"/"not viewed" and to collapse and "expand" it 👀

Detecting which file to mark as viewed/which to collapse is probably easier than the other way.
Would even be happy to get only this direction.

Might be helpful to somehow subtly highlight the current "in focus" file somehow.

[vanessa-kalu]

@IchordeDionysos those are both great suggestions! We'll add this to our upcoming releases

[StaticPH]

With all due respect, this seems like a degradation in functionality almost all across the board. Allow me to be blunt, and list the reasons why each part of this is a problem, and how I would personally choose to fix it.

First and foremost, having anything in a sidebar like this still doesn't make the user experience any more ergonomic in a narrow window or display. It even has the potential to interfere with device navigation gestures, like forward history navigation in the browser on an iPhone, depending on exactly how the site implementation presents on a given platform, browser, and size.

Comments in a sidebar makes less sense than showing them inline, as they were previously, because it's not immediately evident what part of the code an individual comment is about, especially if the comment pertains to a block of code, rather than a single line. This actually makes it worse on a narrow window display, where you can't properly see both the file contents and the sidebar comments at the same time. Even more so if you have both the file tree visible and are using the split-diff view instead of unified.
All we actually need is an ergonomic way to see the total number of comments, and jump from one to the next, optionally being able to skip over resolved or no-longer-applicable comments. Maybe a toggle button that controls whether comments are expanded or not by default. As far as I am concerned, we've already been fully covered here for a long time.
That much could be trivially accomplished with only as much horizontal space as it takes to display buttons for jumping to the next and previous comments somewhere on the page, and maybe another checkbox to control whether to skip some comments, as previously mentioned. If some artistic designer has their heart absolutely set on occupying the right side of the screen with something, just give us a narrow space with the commenter's gravatar, the line-number/range, and a scrollbar.

I can see both sides to the prospect of having the PR overview visible at the same time as the code changes, but from where I sit, there's a clearly superior side; between the title of the PR, and the code changes themselves, I shouldn't need to be repeatedly looking back and forth between the two, and if I do, then it means I'm already paying enough attention to one or the other that I don't benefit from having both crammed into view at the same time. Never mind that any media elements that might be part of the overview would need to accommodate the width of the sidebar.

Having the merge status be easily accessible in a <details> tag that sits closed at the top of the page by default would make perfect sense. Click a button to expand the tag and interact with the status information, click it again to collapse it, give the button a title attribute like a good web developer should^*. That's it; that would have been perfect. Not this sidebar tab; not this thing that can cause recalculating and re-rendering of all the wrapped content on the page, while also wasting a significant portion of the horizontal screen real estate with empty space. It's true that vertical screen real estate is generally more valued, so from that perspective, it's understandable that a sidebar might seem reasonable, but the reality is that users are extremely unlikely to spend an extended period of time looking at the merge status details.

Just like with comments, there's no need to have a sidebar to show alerts in. Just do what has previously been done for comments, and show them inline in the code. At most, just have a toggle button for whether or not to show the details of each alert without first clicking on the icon shown inline.

On the whole, the only things that really strikes me as an improvement here is the ability to filter comments in this new and otherwise not-useful sidebar, and the inclusion of the convenient button for accessing the detailed merge status directly from the "Files changed" page (although the latter feels like it was already accomplished well enough between the existing tabs, and using a keyboard with the End key). Having a sidebar dedicated to the file tree is already plenty of sidebar; having another just doesn't seem to be providing me any tangible benefits.

I really hope that the developers, designers, and anyone pushing for these changes take the time to actually read and consider the points I've made here. I've taken the time to not just complain about a change, as is the case with so many of the comments on feature feedback discussions, but to offer a few suggestions for what you could be doing differently, and why. In the mean time, I, for one, will be continuing to use the classic version of the page.

(*) If the comment about the title attribute comes across as a criticism, it's because it is. The number of times I've had to script proper and accessible standard tooltips or text for assistive technology, just for my own sanity, has gotten out of hand with all the redesigns over the last several years, but that's an issue of its own, and not really in the scope of this discussion. It just happens that today I noticed I needed to redo some of them due to a CSS change that must have occurred recently, so it was on my mind.