Streamlining Code Reviews: GitHub's New Docked Panels and the Community's Take on Productivity

GitHub Redefines Pull Request Reviews with Docked Panels

GitHub recently announced the rollout of a significant update to its pull request (PR) “Files changed” page: docked panels. This new feature aims to revolutionize how developers conduct code reviews by enabling a side-by-side view of code with crucial PR context. The goal is to enhance developer productivity monitoring by allowing reviewers to stay in flow, avoiding constant tab switching or losing their place.

The new experience introduces several dedicated panels:

• Comments Panel: Centralizes review comments and high-level conversations, allowing users to add new comments without navigating away from the code.
• Overview Panel: Keeps the pull request description visible, providing essential context like goals, implementation notes, or testing instructions while reviewing the diff.
• Merge Status Panel: Offers quick access to merge readiness, identifying blockers or missing approvals directly from the PR header.
• Alerts Panel: Integrates code scanning alerts related to changes within the PR, enabling security findings to be reviewed and acted upon alongside the code.

Community Insights: A Mixed Reception to the New Flow

While the intent behind these docked panels is to streamline the code review process and boost productivity monitoring, the GitHub community has offered a range of feedback, highlighting both potential benefits and significant UI/UX concerns.

Enhancing Review Flow vs. UI/UX Challenges

One user, IchordeDionysos, pointed out issues with comment navigation, specifically when clicking on replies. They noted that replies often don't expand within the side panel, leading to disorientation, especially for outdated threads. This directly impacts the efficiency of reviewing historical conversations. IchordeDionysos also requested vital keyboard shortcuts for marking files as "viewed" or "not viewed," collapsing/expanding files, and subtly highlighting the currently focused file – features that could significantly improve navigation and review speed.

Another user, StaticPH, provided a comprehensive and blunt critique, suggesting the new design represents a "degradation in functionality" across the board. Their primary concerns revolved around the use of sidebars:

• Ergonomics for Narrow Displays: Sidebars are deemed problematic for users on narrow windows or mobile devices, potentially interfering with navigation gestures and making it impossible to view both code and context simultaneously.
• Comments Panel: StaticPH argued that showing comments inline, as was previously done, is superior. The sidebar approach makes it less immediately evident which part of the code a comment refers to, especially for block-level comments. Suggested alternatives included an ergonomic way to jump between comments (next/previous, skipping resolved), a toggle for expanding comments, or a minimal sidebar showing only gravatar, line-number, and a scrollbar.
• Overview Panel: The benefit of having the PR overview constantly visible was questioned, with the argument that if a reviewer needs to refer to it, their focus naturally shifts, diminishing the need for a persistent sidebar.
• Merge Status Panel: Instead of a sidebar, a collapsible
  tag at the top of the page was proposed as a more efficient solution. This would avoid wasting horizontal screen real estate and prevent recalculations/re-rendering of page content.
• Alerts Panel: Similar to comments, inline display of alerts was preferred, or at most, a toggle button to show/hide alert details.

StaticPH concluded that the only true improvements were the ability to filter comments within the new sidebar and the convenient button for accessing detailed merge status directly. They emphasized that the existing file tree sidebar is already sufficient and that adding another sidebar offers no tangible benefits, leading them to continue using the classic version of the page.

The Quest for Optimal Developer Productivity

This discussion underscores the delicate balance between introducing new features to enhance productivity monitoring and ensuring they genuinely improve the developer experience. While GitHub's docked panels aim to keep developers in flow, the community's feedback highlights the critical importance of UI/UX design, especially concerning screen real estate, accessibility, and intuitive navigation. Listening to these insights is crucial for refining tools that truly empower developers and foster efficient collaboration.