enixcoda / gitako

🐙 File tree extension for GitHub on Chrome & Firefox & Edge

Gitako

Gitako is a free file tree extension for GitHub, available on Chrome, Firefox and Edge.

Features

• 📂 File tree for repository and pull request
• 🔎 Instant file search and navigation
• 🕶️ Support private repositories
• 🧩 Support GitHub enterprise, Gitea, Gitee, and more
• 🏎 Always performant, even in gigantic projects
• ⌨️ Intuitive keyboard navigation
• 📋 Copy snippets and file content
• 🎨 Various icons and official themes support
• 🗂 Support git submodule
• 📏 Fold source code

Install

It is more recommended for Edge users to install from Chrome store. It may delay for weeks before updates got published to Edge store because its review process is slow.

Help Gitako

Gitako is FREE. If you like it, please

• ⭐️ Star it at GitHub
• 👍 Review in the extension store

Feature discussions and bug reports are also welcome!

Check out contributing.md if you want to contribute to Gitako directly.

About

Source of the name and logo?

The totem of GitHub is a cute octopus. And octopus in Japanese is タコ(tako). Then concat them together:

git + tako -> gitako

The logo of Gitako is a tentacle of octopus, indicates that Gitako works like a part of GitHub.

gitako's Issues

在 Releases 页面也自动展开了，且提示 Access Denied

在 Github repo 的 Releases 页面如：https://github.com/EnixCoda/Gitako/releases
时不应该自动展开。
展开还无法展示目录树，提示 Access Denied。
能否和 Pull requests 页面 的行为一致呢？

Catch runtime errors

It's obviously needed for improving quality of Gitako.

What I worried about most is that Gitako might crash in some cases, then disappointed users and leave silently (not every user would be sooooo nice and patient to write a issue here for a non-famous extension).

Lag due to scroll into view

Problem

When file list is long (about hundreds items), it takes a while to render the next frame after fold/unfold a folder.

Profiling

when expanding a folder:

In above example, it took 280ms to render a frame after expanding the list length from 50 to 500, in which scrollIntoView took about half of the time (137ms).

when folding a folder:

In this example, querySelectorAll invoked Recalculate Style, which is not expected. As what I want was just query all the file list elements.

Solution

1. call scrollIntoView less, e.g. not call it when expandNode is invoked by mouse click
2. use another method to query file list elements, instead of querySelectorAll
3. use virtual scrolling

More

The diff method of React (in fact it's preact) takes an average of 25ms every time when fold/unfold fold. No matter how many (50 or 500) elements are there. Is it possible to even reduce it?

Settings area is not noticeable enough

Thinking about blur out & darken file explorer when settings area is open.

Scroll position not stable

The scroll position of page content is not stable, if manipulate browser history to go back & forth multiple times.

Dark Theme

Is it possible to add different themes or just dark theme?

[feature request] add switch branch function

Could Gitako support branch switching in it?

现在背景为啥默认是白色了？

昨天还是背景还是跟随网页的颜色的，今天怎么变成白色的了...

Chrome Web Store link doesn't works

https://chrome.google.com/webstore/detail/gitako/giljefjcheohhamkjphiebfjnlphnokk

How to enlarge width

如何调整宽度, java 和 android 项目 文件夹层次太深了， 宽度不够看。

Title not updated after PJAX

[Feature] Add option to close by default

I'd find it useful to have the file tree closed/minimised by default, so that I can open it only when I need.

一些功能请求

很好到插件，比octotree良心多了。
作者可以将插件上传到火狐吗？
作者能否适配下码云？

文件目录过多时无法滚动浏览

访问以下地址，展开pages/example 文件夹，出现无法滚动的情况
https://github.com/youzan/vant-weapp/tree/dev/example/pages

Gitako logo causes top bar elements shrink to center.

With Gitako enabled:

Without Gitako:

Automated release process

For Chrome: https://developer.chrome.com/webstore/using_webstore_api
For Firefox: https://extensionworkshop.com/documentation/develop/web-ext-command-reference the sign command
For Edge: https://partner.microsoft.com/en-us/dashboard/microsoftedge/publishapi

This could save me 10~20 mins on each release.

Use pjax-api

Found a new generation of PJAX

Replace current PJAX with it will resolve a lot of legacy issues,

• conflicts with PJAX used by GitHub page
• could not programmatically trigger PJAX

Header of sidebar is not as tall as GitHub's header

GitHub is showing in different themes on Chrome Canary and Chrome:

left: Chrome Canary, right: Chrome

Seems GitHub is going to release a new theme?
Maybe a new theme for Gitako is needed. It will not only solve the header issue, but also provide a way for toggling whether to show the sidebar.

Aggressive tree data loading

How:
Request for meta data and tree data(guess URL with branch and path info from URL/page content)
When meta data is retrieved, we'll know if the guessed URL was right, we successfully saved time.

Animation for file search

Javascript process duration of searching doesn't take much time, but rendering the result (when the keyword is short, result list will be long) blocks UI.

Setting up a generator for async search would help?

某些github仓库打开失败

如：https://github.com/is/jsch

Add hover label for file items

Show item's path when mouse hover.

<tag title="something to show when hover"></tag>

Handle git submodules

For now, accessing git submodule items would cause 404.

Example

https://github.com/bitjson/bitcoin-ts/
see /wasm/secp256k1

https://github.com/react-icons/react-icons/tree/master/packages/react-icons/src/icons

Also there is a branch test-out-submodule in this repo for testing submodules not hosted on GitHub. It has a submodule /vesta which was picked randomly from GitLab trendings.

scroll to nav repeatedly when go back in history

problem

When browsing a repo, redirect within the repo for a few times and trigger go back (browser action). Then scroll up or down a bit, you would notice page get scrolled back to nav and it might repeat a few times.

solution

add examinations for the url when last pjax:end was triggered, if url is not changed, do not invoke scrollToRepoContent

Disable toggle key when ate bug

Otherwise...

Add some icons

Icons, colors 😄

Add icons for file type.

[Feature request] Pin Gitako sidebar

A great option to would be to pin the sidebar causing Github to resize, so that Gitako doesn't overlay

Support Gitee(码云)

Gitee has become more popular than ever. It is time to support it.

API ref

能增加gitlab私服的支持吗？

非常感谢作者提供了这么好的一个插件。
公司采用的是自己搭建的gitlab私服的方式，所以gitako就无法使用了。

support Safari

Gitako for Safari is available via TestFlight.

https://testflight.apple.com/join/1hefQt6Y

---

Did some research on migrating to Safari, it is not as hard as I thought. But there are still few edge cases need to be take care of.

Highlight matched characters in search results

Current search results do not look related to user input much.

Making the matched characters highlighted should fix this.

Let user know what has been updated.

Like showing a popup of change log when it's updated?

At least I need to inform users that I'm pushing on it without annoying them (most update popups make me feel annoyed).

[Feature] Update icons (and add option to customize?)

What about removing the icon animation when a page loads and the tree is closed (I find it annoying 😅), and update the icon to show something more meaningful to the action?

I did a small test, here it's how it would look (the icon is just to test, eventually in the future you could also add an option to select an octicon):

Amazing job!!! 👏

Side Bar is activated in Repo Settings Page

It's time to write test cases...

Image Host

I'll use this issue to host images used in wiki pages.

This extension has a bug on the high score screen

This extension has a bug on the high score screen.My monitor is 27-inch 2k resolution, which will be displayed every time I enter.

expand to fails with encoded path

problem

when navigating to this file, side bar fails to render, bc:

solution

use decodeURIComponent to solve this

Doesn't work with custom repos

Hi. We have custom enterprise Github with DNS like: github.my.company.com
The extension doesn't render the tree on the left side. Looks like it doesn't understand that current page is a github page.

handle commit page

Gitako is not collapsed in pages whose URL look like https://github.com/:username/:repoName/commit/:commitSHA (e.g. ee4b213).

Also, even after collapsed manually, the icon is not at the right place.

Regex filter doesn't work as expected

I wanted to use the filter only to show all .go files. However, a lot of files that do not end with .go were displayed. See the below image. Is this a bug, or where am I wrong?

the gitako app in github is not useable，howtofixit？

Can not open file page in firefox

OS: MacOS 10.14.6
Firefox: 73.0

The webpage is loading forever when clicking file link in Gitako sidebar, and nothing output to dev tool.

Support Firefox

Firefox surprisingly provided webextension-polyfill.

Useful links:
https://extensionworkshop.com/documentation/develop/
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons

This partially resolves #31

Hide empty middle packages

In java/scala projects, the package path is long.
It will be great to hide the empty middle packages/directories.

For example, in Gitako project, it will display

-- src
---- asserts/icons
-------- Gitako.jpg

instead of

-- src
---- asserts
-------- icons
------------ Gitako.jpg

[Feature request] Filter the tree view when in a pull-request to only those files.

Feature request: Filter the tree view when in a pull-request to only those files.

[feature request] 添加默认收起 Gitako 的选项

进入网页后不默认展开侧栏的 Gitako，而是在有需要时可将其 pin 起来（参考 octotree）

Use primer components

Gitako currently depends on stylesheets provided by Github HTML, i.e. CSS class hack.

Maybe using primer will make its UI more consistent.

Sync settings

For now settings of Gitako is saved in Chrome local extensions storage (not the localStorage).
As it is getting more config options, sync them with Chrome sync extensions storage might be a good feature.

Could not handle branch name containing slash

try https://github.com/EnixCoda/Gitako/tree/feature/svg-sprite

Toggle Icon moving animation

When enlarging window's width from under 1520px, the toggle sidebar icon jumps from left next to the GitHub icon.