berzniz / github_pr_tree

Add a file tree to GitHub's Pull Request

Better Pull Requests for GitHub

Chrome and Firefox browser extension to show a file tree on GitHub's Pull Request pages.

• Browse pull requests with an IDE like file tree
• Private repositories support out of the box
• GitHub Enterprise support
• Dark mode
• Other goodies: track viewed files, resizable tree, expand to full width and more

Who made this?

Tal Bereznitskey. Find me on Twitter as @ketacode and on LinkedIn.

This is an open-source community project and is not endorsed or affiliated with GitHub.

Special thanks goes to Torii for providing the time and resources to work on this extension.

Install

Install from the Chrome web store: Better Pull Requests for GitHub for Chrome

Install from the Firefox Browser Add Ons: Better Pull Requests for GitHub for Firefox

GitHub Enterprise support

To enable the extension on your organization's domain:

1. Right click on the extension icon
2. Choose "Enable Better Pull Request for GitHub on this domain"
3. Reload the page

Development

1. Install:

   $ yarn install

2. Run

   $ yarn start

3. Load the unpackaged build/chrome/development folder on Chrome's "Manage Extensions" tab

4. Make changes

5. Click "Reload" on Chrome's "Manage Extensions" tab

Testing

Run tests using jest:

$ yarn test

History

Find the change log here: Changelog

github_pr_tree's Issues

Edgium support

Thank you for the extension, it made my life heaps easier!

However I am now encouraged to migrate to Edgium from Chrome, and the extension doesn't appear to be working.

[Feature request] Ability to exclude files from tree

It would be nice to filter the tree by "Not contains" or something similar.

For example, sometimes I want to exclude "test" files to focus on the real code first.

Height not correct

When scrolling on a PR and you reach bottom, the height of the sidebar is wrong.

A dark border?

Hey! Love the plugin and especially dark mode! I've not contributed to someone else's repo before, so forgive me if I've missed something but I tried to raise a branch and PR but I didn't have perms.. guessing it should be raised as an issue first?

Basically, dark mode works great with tampermonkey and the github dark theme, except the border around the tree view! Its white! :P

Before:

After:

CSS change:

.__better_github_pr_dark_mode .__better_github_pr {
    border-color: #484848;
    background-color: #282923;
    color: #ffffff;
}

What do you think? I understand if you want to leave it as is though, as most people might be using the white version of github.

PR tree can not be closed

Open a PR. Observe that the X on the PR tree does not respond.

File tree suddenly started appearing on the right, obscuring file content

I have been using the extension for probably a year without incident, and it has always worked extremely well. Thank you!!

Suddenly today it started showing the file tree on the right and doing very odd things to the text.

Here's a screen shot on initial page load--notice file content is totally absent.

If I then scroll down a bit, then the file content appears, but obscured by the plugin file tree.
(And it still seems to have allocated the empty slot on the left side of the page.)

This is in Firefox v80.0.1; I do not believe there was any browser update that caused this.
I tried disabling then re-enabling the plugin; no change.
(Also, when it is disabled, the rest of the page looks and acts normal--no initial blank area like that shown above.)
I tried closing then re-opening Firefox; no change.

FYI: My repo is public; you can see the exact page above at https://github.com/chef/automate/pull/4330/files

File tree shows initial file layout when moving files

On pull requests that contain moved/renamed files, the file tree tends to display the old file layout instead of showing the new name & location of the changed file(s). I put together a dummy repo and pull request showing this issue.
https://github.com/Cluhm/test-repo/pull/2/files

In the example pull request, the test-requirements.txt file was moved from the project root in to a test directory, but the file tree still shows the file at the project root.

Sidebar does not show all changed files

The sidebar doesn't show all changed files.

[Feature request] Bold file names that have not yet been viewed

As soon as you click on the file name in the tree and it will open, change the font style to the usual one. Of course, when you reload the page, you need to remember which files were viewed earlier.

If the pull request has been updated, only the files that have been updated should be bold again.

Selected item out of sync

The selected item in the tree seems to be out of sync and typically not the item I clicked on.

It seems like a bug to me but opening an issue to track this nevertheless and to get some feedback from others.

Display file's "view" status in tree

Hello,

Is it possible to reflect file's "View" status within the tree with little something ? That way we could in a glance see what files have been viewed and those which need review.

PS: Very nice work, I like this extension !

Shows up as empty space when on non-PR commit page

Good job on the extension, love it so far :)

Not a biggie, but on the commit detail page it takes up the space but the tree doesn't show up.

The sidebar lowers the diff code's line length

Sidebar is rendered next to the diff, it pushes the code to the right thus making the code's line shorter. This is problematic as horizontal scrolling is applied if I need to see the full code line. There is no need for horizontal scrolling when this extension is not loaded. Let's move the extension's rendering position outside the diff tab, e.g. taking inspiration from octotree's rendering position.

Without sidebar

With sidebar

With octotree sidebar

[Feature request] Automatically collapse directories where all files are viewed

When I'm reviewing a big PR I usually close each directory in the tree once I'm done reviewing all files in it. But when I refresh the page (for any reason, say the person that opened the PR pushed new updates) the tree is fully expanded again. It would be very useful to be able to automatically collapse the tree to only show directories with unviewed files.

[Feature request] Show only the diff of the selected file in tree

Hide all other files, respectively. This behavior is more familiar to users who have switched to Github from Bitbucket.

Extension doesn't work with CODE OWNERS feature

Hi there,
Looks like GitHub updated the markup again and your wonderful extensions isn't working

Uncaught TypeError: Cannot read property 'parentElement' of null
    at u (better_github_prs.js:1)
    at s (better_github_prs.js:1)
    at better_github_prs.js:1
    at Array.forEach (<anonymous>)
    at better_github_prs.js:1
    at Array.forEach (<anonymous>)
    at b (better_github_prs.js:1)
    at n.value (better_github_prs.js:31)
    at n.value (better_github_prs.js:31)
    at La (better_github_prs.js:22)

Scrollbar bug in Chrome 67

Scrollbar appears on top of the Jump to... 🔽 popup.

Plugin stopped working on Chrome on MacOS

File tree is not displayed on the current Chrome build:
Version 80.0.3987.122 (Official Build) (64-bit) on MacOS Mojave 10.14.6.
The faulty behaviour started today on multiple machines, so the cause is most likely a Chrome update.

Feature Request: keep file tree always in view when switching between files

It would be nice if the file tree could be kept in view when you switch between source files (like the BitBucket Tree Plugin does: https://chrome.google.com/webstore/detail/bitbucket-diff-tree/pgpjdkejablgneeocagbncanfihkebpf?hl=en).

Thx already for the great plugin that makes Github PRs much more bearable.

File missing from individual commit view

Summary
When I open an individual commit, at least one file is missing from the file tree. I do not know how prevalent this is, I just happened to be able to easily identify one occurrence, so I am passing that on for your consideration.

My repo is public so I can show you a good example. That screen shot is from this commit: bf2c603 (#4226)

I know that at least one more file is in this commit, components/automate-ui/src/app/pages/create-notification-modal/create-notification-modal.component.ts, because VSCode shows the changes from that specific commit:

One possible factor that may or may not be relevant: the file in question was added earlier in the commit history of this PR; that is, the PR was not just updating an existing file.

Enterprise Github

Cool extension!

This doesn't work with the enterprise version of Github I use at work.

github.company.com

Suggestion PR comments squashed when sidebar is open

When the sidebar is open, the new Suggestions PR comment gets squashed up in the comment preview. Examples below. Closing the sidebar fixes it.

With the sidebar closed:

With the sidebar open:

Show Tree in more/all PR tabs

I think this would be even more awesome if it always showed the sidebar, rather than just in the "Files Changed" tab of a PR, or at least in the "Conversation" and "Files Changed" tabs.

add option to mark files / directories as viewed from the tree

It would be useful to add an option to mark files and directories as viewed from the tree.
I'm thinking about a right-click context menu or a check button near each item

• single files
• directories - marks all files inside (multiple levels)

I can submit a PR if needed

[Feature request] Add green check to directories when all files are checked

When I review a PR and click on "Viewed", nice green check is added to the file name.

I suggest to add the same green check to the directory in case that all files and subdirectories in that directory are already checked. To see what directory trees are already reviewed and can be collapsed for easier navigation.

Another idea is to change the collapsing triangle to green color to keep the graphics simple. Because I will collapse those.

This would significantly help to review bigger PRs with many updated files.

Configuring URL of enterprise github that doesn't have "github" in the URL

I saw #3 , but our enterprise github is on a URL which doesn't have "github" anywhere in the URL. I can't seem to modify the wildcard URL on the configuration page of the extension. Is there any way to make it work with a custom url?

Firefox support

This really is just a question. This plugin is so awesome that it's making it difficult for me to switch to any non-chromium base browsers. Is there any plan to port this to Firefox?

Extension not working anymore (Chrome)

Tree should reflect whether a file is marked as viewed

Github just shipped a feature to keep track of viewed files. Showing this status in some way in the tree would make navigating a PR to view files that you haven't yet reviewed even easier.

Crucible does this by marking un-viewed files in bold. That is one approach, but really any way to visually distinguish views/unviewed files would be fine.

PR tree refreshes constantly

Open a PR, such as https://github.com/kubernetes/kubernetes/pull/74447/files

Hover in the PR tree over a file: observe that it refreshes and flickers non-stop.

Try to click the expander arrow: observe that it doesn't fold up or if it does it immediately unfolds again

No content in the plugin window

For some reason, I'm now seeing no content in the container where all the plugin content normally lives.

Happening on any PR I visit, currently in a private repo console logs from chrome:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null
    at l (better_github_prs.js:1)
    at better_github_prs.js:1
    at Array.forEach (<anonymous>)
    at better_github_prs.js:1
    at Array.forEach (<anonymous>)
    at c (better_github_prs.js:1)
    at n.value (better_github_prs.js:31)
    at n.value (better_github_prs.js:31)
    at Ia (better_github_prs.js:22)
    at Ma (better_github_prs.js:22)

Happy to have a look at it, if its an issue not just related to me

[Feature request]Add buttons to hide/show all comments in codes

Comments will insert into the codes, it will be very convenient to add a button to show/hide all the comments immediately.

Open / close tree icons reverse to norm

Genius extension!

My gut instinct though was that the open/close arrows are backwards. Looking around, here are a few examples that are opposite to github_pr_tree. (Not an exhaustive search, but I didn't come across any that were the same way around.):

Maximum width should only apply to `Files changed` tab

I don't want every part of a PR to be max width. This is because it stretches out the comments and requires more left -> right eye movement to read it. I was hoping that the max width feature would only apply to Files changed but it doesn't. Since the button is only on this page, it should apply only to this page.

P.S. the max width icon isn't very apparent as to what it does to me. Maybe there is a better icon?

Search by exactly file name doesn't work

ISSUE:
When user starts to search file by provide exactly file name - results not shown.
I think that search shouldn't be case sensitive.

In case below I try to find DataGrid.js

Comments icon on files

Especially for PR involving many files (I have to review a PR with about 90 files involved) it is fundamental to display an icon to show which files have comments:

Final markup might look similar to:

.. and final result similar to:

Link stop working after first click when another theme is applied

Hi, there's seems to be a conflict with my dark theme for github and your side bar CSS.
https://github.com/acoop133/GithubDarkTheme

Your sidebar works perfectly when the theme is not active. when the theme is active, after the first click on the link, the sidebar becomes completely un-interactable.

I will take a look why its so when i have some time, but if you want to beat me to it. be my guest :P

Chrome - TypeError: Cannot read property 'getElementsByClassName' of null

Hi,

We very like your github extension, but it stopped working after the weekend.

Chrome : Version 80.0.3987.122 (Official Build) (64-bit)
Github enterprise: GitHub Enterprise Server 2.17.16

Could you please check what would be the problem? Or do you need any other details about the error?
Thanks!
Zoltan

Extension not working for Github enterprise in Firefox

When trying to use the extension with Github Enterprise in Firefox the first thing I encountered is that the icon was not showing up. After tinkering a little bit (never played with extensions before) I managed to make it show up by adding the following conf to the firefox manifest:

  "browser_action": {
    "default_icon": {
    "16": "16x16.png",
    "48": "48x48.png",
    "128": "128x128.png"
    }

The second one was when trying to enable the extension in my github enterprise domain, when clicking "Enable Better Pull Request for GitHub on this domain", I do not see the file tree and this appears in the inspector:

undefined is not a valid URL. background.js line 120 > eval:34
    addContextMenu webpack:///./node_modules/webext-domain-permission-toggle/webext-domain-permission-toggle.js?:34
    apply self-hosted:1875
    applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:600
    applySafe resource://gre/modules/ExtensionCommon.jsm:583
    sync resource://gre/modules/ExtensionCommon.jsm:2418
    listener chrome://browser/content/child/ext-menus.js:273
    withHandlingUserInput resource://gre/modules/ExtensionCommon.jsm:120
    listener chrome://browser/content/child/ext-menus.js:272
    apply self-hosted:1875
    applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:600
    fire resource://gre/modules/ExtensionChild.jsm:1237
    recvRunListener resource://gre/modules/ExtensionChild.jsm:1241
    recvRunListener self-hosted:878
    _recv resource://gre/modules/ConduitsChild.jsm:78
    receiveMessage resource://gre/modules/ConduitsChild.jsm:169

I managed to make it work by adding my domain under permissions and the content script "matches".

  "permissions": [
    "contextMenus",
    "storage",
    "*://*.github.com/*",
    "*://*github.mydomain.com/*"
  ],

  "content_scripts": [
    {
      "matches": [
        "*://*.github.com/*",
    "*://*.github.int.mydomain.com/*"
      ],
      "run_at": "document_idle",
      "js": [
        "better_github_prs.js"
      ],
      "css": []
    }
  ],

Sadly I couldn't come up with a general solution I could send as PR. Hope this helps :)

Thanks for your awesome work!

Support for dynamic width of sidebar

Hello, I think if sidebar with tree of source will has dynamic width and user can change this width it is better than open/close sidebar. What you think?

How to re-open tree after closing

Other than doing a browser refresh, is there a key, button, or mouse action that can re-open the tree once you close it via the "X" button?

File tree does not populate sometimes.

Example: https://github.com/kubernetes/kubernetes/pull/73977/commits/7527b3d51a7e996d964dbc5e8a68fe273f23bfdf

(If I don't quote it, github transforms it...weird)

Feature Request: It would be good if you could filter for a specific file within the tree view

As title.

Horizontal expansion no longer works

I assume github changed something as other horizontal expander plugins also fail now.

Dark mode

A dark mode could be interesting and quite simple.

• Only change the theme of the tree, not GitHub as a whole
• Need to extract all styling code to css and apply dark / light themes
• Configurable from the options page

Remember fullscreen setting

It would be great if the fullscreen setting was remembered. This way I don't have to click it on every PR.

File icons should work on Firefox

From the Browser console:

Content Security Policy: The page’s settings blocked the loading of a resource at cdn.jsdelivr.net/npm/[email protected]/css/style.css (“style-src”).

"Hide tree" button.

That is a feature request. Sometimes tree isn't necessary.

File filter setting backs to default after clicking a file in file tree

Steps to reproduce

1. View PR files

2. Uncheck all file types in file filter.
   
   After this step, changes will fold up.
   

3. Click any file in file tree.

Observation

Page reloads, all file types in file filter checked, file changes expand out.

Expectation

1. Clicking a file in file tree does not cause reload
2. File filter setting is reserverd.
3. Clicking a file in the tree make that file changes expand out.

The "View entire file" and "Github Desktop open" icon tooltips are rendered behind the top status bar

When I mouse over the "view entire file" icon and the "open in Github Desktop" icon in the upper right of the screen, their tooltips come up, but they are rendered behind the top status bar, rather than in front of it, so most of the tooltip is not visible.

In the above image, you can see the black strip of the tooltip and the black "arrow" pointing down to the view icon - but the rest of the tooltip, and all its text, is not visible.