Redesigned “commits” screen

There are two essential screens?"pages", if you prefer?on a site like Bitbucket. The "source" screen displays a project’s source files in their current state or as they existed at some point in the past. The "commits" screen depicts a project’s changes over time, which helps to answer questions such as:

  • How mature is this project?
  • Is it still being maintained?
  • What’s been committed recently, and who’s making the commits?

Until late last week, Bitbucket’s commits screen looked something like this:

Old "commits" screen (click to enlarge)

The fifteen most recent commits were displayed, and one could use the pagination links to view older commits. This was perfectly sufficient for answering the question "what’s happened lately?" It was *horrible* for questions such as "when did Jonathan last fiddle with Google Analytics code?" Have fun clicking through 300 pages!

The solution was to return to the command line and enter something like:

  $ hg log --user jonathan --keyword ga

FedEx

Four times each year, Atlassian developers and a smattering of non-developers engage in "FedEx". Everyone chooses a cool project to work on from 2pm on a Thursday until 4pm the following day when we all present what we’ve managed to get done. The idea is that many of the cool features developed during FedEx will actually ship. Well, this is what we shipped:

New "commits" screen (click to enlarge)

Brodie had the idea of leveraging Mercurial’s "revset" functionality to make the commits log searchable. We decided to team up for FedEx and make it happen. Now, there’s no need to leave Bitbucket just to find a commit:

Commits filter input

Revsets are much more than an alternative to hg log --user and hg log --keyword. My favourite filter, for example, is not merge().

It’s great to be able to tap into a powerful Mercurial feature without leaving Bitbucket, but one shouldn’t be forced to conform to a DSL’s syntax to do a simple search. So, we automatically convert simple text searches into the appropriate revset query. Searching for static media, for example, will find commits containing the word "static" or the word "media". Searching for “static media” (with quotes) would return commits containing both words.

But wait, there’s more

Brodie and I weren’t satisfied with just making the screen work better. We were out to win FedEx, after all, so it had to look great too. We made a number of changes to the way in which the information is displayed:

  • By using the new and improved table styling we first used for pull requests, we were able to increase the number of commits displayed on each page from 15 to 30.
  • Results are loaded via pjax, a sweet coalescence of Ajax and HTML5’s history.pushState created by GitHubber Chris Wanstrath.
  • The branch graph used to reset itself on each page of commits?in other words, if you started on page 1 and went to page 2, you wouldn’t see the graph lines from the bottom of first page continuing at the top of the second page. The graph’s now consistent across all pages.

Future improvements

Several users have brought it to our attention that these changes make it difficult to see at a glance which branch each commit is on. We’re keen to address this, and will be rolling out a small change at some point within the next couple of weeks.

Chime in in the comments thread to let us know what you think!