A while back when GitHub updated the design of their web page, they introduces a change that has annoyed a lot of people; they decided to truncate the file/folder name in the repository browser. This makes it impossible to distinguish files/folders that follow a naming conventions, such as namespace hierarchies.

What I did was create a very simple Google Chrome extension, called GitHub.Expandinizr which kinda solves the problem. I say kinda, because it is a quick hack really and it was not designed to be prefect. That said, if you can improve it, then please send a pull-request, you can find the source at github.com/thecodejunkie/github.expandinizr.

So what does it do? All it really does is that when it detects that you are browsing github.com, it will inject a single css class into the page to remove the ellipsis from the file/folder name.

.css-truncate.css-truncate-target {
    display: inline !important;
}

This css class is usually sets the display property to inline-block with an added text-overflow that has been set to ellipsis. By changing the display we prevent it, in a rather crude way, to ellipsis the text. Notice that the css declaration has been marked as !important which will ensure it gets higher priority than the one in the GitHub css declaration.

Known issues

Like I said, this is a hack. If the un-ellipsed text becomes too long, then it could cause the new width of the repository browser to push into other page elements, such as the sidebar navigation on the right hand side of the design. This is especially noticeable on the main page of the repository browser, since the sidebar is expanded and takes up much more horizontal space, than when it has been collapsed.

I've fine with this, so at present I am not going to spend any time trying to figure out an alternative approach, that resolves this issues (I spend 10 minutes on it and got a decent result, but it caused other problems). But, like I said, if you come up with a better solution, send me a pull-request with an updated inject.css

All-in-all

This was a fun learning experience. It was the first time that I created a proper Chrome Extension and it was certainly the first time I published it in the Chrome Store. Who knew it cost $5 to become a publisher in the store? Now I know!