By Brian Ganninger on July 17, 2017
A “non retina-burning” update for SourceTree on macOS has been on our radar for a long while, and recently our senior designer Joel Unger came up with a mock-up on how it might look. We went back and forth on limitations and compromises (i.e. the old expectations versus reality phase) while exploring the concept during ShipIt, Atlassian’s well known hackathon. From there it then entered the development pipeline because even the worst compromise we’d found, potentially losing customization of the toolbar, wasn’t enough to deter 70+% of respondents to a quick Twitter survey.
There are a variety of ways to implement dark themes on macOS. These range from the basic, applying an NSAppearance at the top level of a window and letting it cascade through stock controls like FaceTime, all the way through the ‘off-limits’ way by utilizing ProKit, a well known private framework used during my time at Apple that provided apps such as Final Cut Pro the ability to customize every element of their appearance. Our discussions focused on what limitations and compromises we wished to take, ranging from the use of color (black or tones thereof? custom colors?), how much content was themed, and deciding on how much custom UI to implement versus what options were available out of the box.
With the goal of offering the best user experience possible without saddling us with additional overhead in the future, we ultimately chose to use custom colors (midnight blue tones in this case) throughout, while maintaining all existing functionality with minimal custom UI. While it was the option that proved the most challenging to implement, we felt it would ultimately provide the best value to users by maintaining desired functionality present in the system by default versus other, more straightforward options available. We also decided to focus only on the primary windows a user interacts with rather than focusing on all windows and sheets throughout the app as it exponentially increases the size and scope of such a feature.
Taming the Beast
With the decision made, what did we change and how?
- color management: similar to ProKit, a theme coordinator provides a centralized location for colors which alternate based on either the specified theme or automatically for current theme. When changing the current theme this broadcasts it to allow elements to respond appropriately. This design has made it easy to iterate on the colors and assets with our designer while minimizing code churn and testable logic. When the time came to revise our branch color selection algorithm we also migrated it to theme coordinator, making it testable alongside the rest of the feature in our unit test suite.
- window, toolbar: one of the first major hurdles was changing the toolbar and corresponding window chrome such as tabs. We use a standard NSToolbar with unified titlebar which supports a handful of themes from macOS and has a wealth of functionality including accessibility and customizability. macOS defines their NSAppearance under the covers in a manner similar to ProKit using bundles with compiled .car files. While there is an API to specify an arbitrary bundle for an appearance and additional ones that aren’t exposed in the system UI there is no guarantee as to their stability so we stuck with NSAppearanceVibrantDark or NSAppearanceAqua typically. Ideally the entire window would pick up the same dark blue tonal quality in combination with that. To accomplish this we ended up choosing the ‘vibrant dark’ appearance, which composites with a darkened blur and materials, and reverse engineering a color that worked with it. Once we’d found a proper color to composite it was a matter of finding where to make that change. In the debugger we were able to catch which layer(s) are composited against and then change accordingly as you can see in the above screenshot in a cauliflower blue.
- asset swapping: SourceTree uses a large number of images throughout the app from its vibrantly themed sidebar to the customized toolbar to file statuses and these need to respond properly, swapping to the theme-appropriate variant and ideally living in the Xcode-optimized asset catalog format instead of continuing the legacy of raw files in Resources.
- scrollers: the next major hurdle we encountered was theming scrollers – these have a default state, background, borders, and even a separate track when scrolling; each of these elements had to be teased apart and themed accordingly.
- the long tail: all those are just a few of the highlights that knocked out the first 80%… after that we had to start poking into the various nooks and crannies to get dividers, backgrounds of containers, customizable per-theme diff colors, buttons, and font colors just right. This is where the aforementioned view debugger really shined as it made it possible to visualize and navigate the disparate bits that composed a given area such as the multi-part diff view sometimes.
- … one more thing: our MVP covered the repo window that’s the lifeblood of developer workflows but it’s not the only one you might keep on-screen. To round out the experience we hopped onto the Repo Browser code as well and were able to leverage the prior work to quickly theme this window too, keeping your screen cool and consistent.
Living with Change
You can give the dark theme and corresponding revised light theme (both of which we consider beta) by downloading it directly from our website. Phased releases are beginning tomorrow in coordination with these “How It’s Made” discussions and we welcome your feedback to review and potentially incorporate in 2.6.1. We’re listening and want to make this the best experience possible as you switch SourceTree from day to night. 🌕🌔🌓🌒🌑
Download SourceTree free
By Brian Ganninger on June 8, 2017
Many macOS apps like SourceTree are distributed outside of the Mac App Store . Using Sparkle, SourceTree pushes out updates to all users simultaneously whenever the
file is updated. While suitable for its intended purpose, these days many web services favor rolling out updates to groups of users in an incremental fashion, providing a safety valve for issues not found during testing or that crop up unexpectedly. Smoother releases were something our team wanted to implement in order to minimize impact these issues can have on the entire user base. The team explored options and ultimately decided to build our own utilizing Sparkle and fastlane, and we’re proud to announce the open sourcing of the code that progressively rolls out new updates for SourceTree.
What’s in the box
From the beginning we sought to have a minimal footprint for these changes, delivering the functionality we wanted with minimal disruption. Each component is easily digestible and ready to be tweaked for your needs. While written in Objective-C it works just as well in Swift via bridging – in fact, the demo app and all unit tests are written purely in Swift!
- PRGUpdateHelper – the primary class encapsulating randomized group management logic
- PRGGroupPercentageTransformer – simple transformer for mapping group numbers → logical percentages
- NSString+PRGHashing – simple category for generating a SHA1 hash
- ProgressiveUpdater (demo app) – a small app that demonstrates how to use the class and visually verify results
Once the client was aware that multiple feeds available we needed to make sure the appropriate feeds were actually there. We were already using the equally well-known toolset, fastlane, for distributing our builds (along with several other tasks) so it was natural to take advantage of its richness.
This project includes a distilled version of our . Default lanes such as alpha and beta generate builds tailored to those updates and there’s now one called custom which provides one-off builds for testing that disable updating. The star of the show is the update lane which takes a percentage and builds the appropriate deploy artifacts for uploading to your server. When brought together these lanes make it efficient to manage testing across a range of options and ensures a smooth rollout to your users with minimal fuss.
Airbags aren’t optional
We implemented phased releases in SourceTree because of substantial, potentially disruptive changes that were underway in the 2.4 release. We added OAuth 2 authentication and an SSH Helper to make setup simple and easy, but complicated challenges around topics such as these have the potential to create problems despite good intentions. We released 2.3.2 in late October with the phased release functionality baked in and, in early December, we started rolling out 2.4 to an increasingly large group of users based on the timeline we discussed previously.
Is it working? Absolutely. We’ve had a manageable flow of reports coming in through our various support and bug report channels along with monitoring comments on Twitter and elsewhere to follow up with users encountering problems. These reports have been invaluable in hardening 2.4 for general consumption. . Rather than cause a large amount of churn for everyone, we’ve now got an additional airbag in place beyond our Trusters Testers beta group that provides a bit more peace of mind for users and breathing room for us.
In the end we hope others will benefit from having these resources at their disposal. If you’re updating your app outside of the Mac App Store you should definitely check it out. There’s a public Git repo available via our Atlassian Labs group on Bitbucket that’s a quick clone away, and it’s the same code used in SourceTree today. We encourage you to file bug reports and feature requests via the repository’s public issue tracker and pull requests are always welcome!
Upgrade your updates today!
By Joel Unger on May 18, 2017
A proper home for tabs
The Windows App always used tabs for navigating between open repositories, but we knew that those tabs weren’t quite right. The toolbar sat above everything else in the UI, but it only really belonged to the open repo (tab). We’ve swapped those panels so that tabs now live at the top of the hierarchy, much like browser experiences that you are no doubt familiar with.
Here we can see a sort of “topological map” of the various UI panes, charting where we’ve been and where we’re going. As you can see, things were pretty cluttered before. We’re moving toward a more logical and simple layout with more room to review your code.
Through testing and feedback, we learned just how much of a pain the bookmarks pane was.
- Many first-time users would struggle cloning or opening repositories.
- There wasn’t enough horizontal space to read the name of the repository in a narrow vertical layout.
- The bookmarks pane took up a lot of valuable screen space, but was seldom used once the repositories were open in tabs.
- The remote repository listing was disconnected and hard to find.
It became clear that repository lists needed their own dedicated experience. Because we were already using tabs, adding a plus button was a natural fit. If you’re familiar with how to open a new tab in a browser, you’re familiar with SourceTree.
A glimpse at the future
Here’s a look at where SourceTree is headed.
- The awkward footer tabs will be grouped in sidebar, like the Mac App.
- The committer info panel will be cleaned up.
- View options will be moved to the view menu.
- Density view options.
- We are exploring more ways to help you manage lots of repositories and stay up-to-date with outstanding push/pulls.
- Diffs will get nicer colors and layouts. 🌈 ✨
- If Build 2017 is any indication, we’ll replace all panels with transparent blurry “Acrylic.” (Just kidding)
As always, we’re listening closely to your feedback. Reach out on our community site and tell us what you think.
Download SourceTree free
By Kelvin Yap on May 9, 2017
Starting Tuesday, May 9th, we will be supporting SourceTree through the new Atlassian Community.
In the past we focused on providing support to SourceTree users with their various setup and configuration issues via support.atlassian.com. Analysing many of these resolutions, we realised that the nature of these support requests didn’t necessitate private contact and the community as a whole could benefit from this knowledge being made public. As a result, we’re dedicating our support staff to focus on offering the same support you know and love via Atlassian Community instead.
The additional benefit of this change is the ability for the broader SourceTree community to contribute, learn, and share their knowledge with one another. If you’re keen to learn more from the SourceTree community, take the next step and watch the collection. We’re committed to making sure you get an equivalent quality level of support via Atlassian Community, with the added benefit of your fellow SourceTree users sharing their knowledge and insight of the product as well.
By Mike on May 5, 2017
Performance was one of the key things we wanted to address while working on SourceTree 2.0 for Windows. It was a cause of frustration for many of you, and we knew we could do much better to improve your experience with SourceTree. Rather than focus on one performance attribute or one git command, we took a holistic approach. We looked at reducing the visual complexity of the UI, as well as the speed of many Git operations you love and use every day.
Visual complexity can be described as the number of elements displayed in an application; the more elements you have in your user interface, the more complex it is. SourceTree uses Windows Presentation Foundation (WPF) to render its user interface and the elements contained within. With WPF, interface elements are part of a composition tree, with each element in SourceTree’s interface adding one or more composition nodes to said tree. Whenever an element changes in the UI (e.g. an event occurs or an operation is performed in SourceTree) both a layout and redraw pass typically happens, as the tree is walked and rendering instructions executed for each composition node.
For visually complex applications (hello, SourceTree!) these passes look, from a user’s perspective, as stutters in the UI. So the general rule of thumb in light of this, along with the feedback we’ve received around performance, was to reduce the number of elements in SourceTree’s UI. We wanted to reduce the visual complexity of the application without losing the benefits of seeing the most important elements at the same time. We’ve actually been working at reducing this complexity for quite some time. So how do those elements stack up in SourceTree 2.0 for Windows compared to older versions?
Visual Complexity Across Versions – Corefx Repo
SourceTree Version 1.9/10: 1760 visual tree elements
How was it done?
- The file diff was rewritten to a custom text display control, which is now virtualized (only visible elements are part of the tree)
- The sidebar was rewritten to a custom virtualized tree view
- Bookmarks sidebar had a few icons removed
SourceTree Version 2: 1414 visual tree elements
How was it done?
- Bookmarks sidebar removed as it’s now in the “
- The log view pills were rewritten to draw via custom function rather than have visual tree elements
Caching File Lists
Another improvement we made was the caching of views between the “File Status” and “Log / History” view. Before 2.0, switching between these views would cause the file lists to refresh each time, something that could take a few seconds depending on how many files you had. In 2.0, these views are no longer recreated when switching, eliminating the stuttering you used to see as the lists were refreshed.
SourceTree Version 1.9/1.10: No Caching
SourceTree Version 2.0: Caching
The performance of individual Git functions has a tremendous impact on the overall responsiveness of the application. SourceTree frequently runs background tasks, so any improvement typically has a cascading effect on higher-level features. For 2.0 we decided to add a hybrid LibGit2 handler for most Git operations in order to improve performance for most operations.
The results speak for themselves:
And of course you’ll also see improvements in other features you know and love like Git LFS support, bundles, SVN support, and interactive rebasing.
Try SourceTree 2.0 for Windows today
SourceTree 2.0 for Windows is a sign of things to come and we’re excited to see our hard work bear fruit in the hands of all of our users. We’re not done yet and will continue to work harder on further performance improvements, and if you have any feedback we’d love to hear from you.
Download SourceTree free
By Kelvin Yap on April 27, 2017
It’s an exciting time to be a Windows developer using SourceTree. We’ve seen steady adoption of SourceTree for Windows and today more than half our users come from Windows – impressive for a tool that used to be Mac only! Since launching the 2.0 beta in January and acting on the feedback we’ve received since, we’re excited to announce that SourceTree for Windows 2.0 is now generally available.
Alongside refreshing the UI with a new and improved design, we’ve also listened to all the feedback you’ve provided and focused on making SourceTree for Windows 2.0 the fastest version yet. And that’s not all, as we’re proud to announce support for Microsoft’s Git Virtual File System, making the process of working with unusually large repositories easier than ever before.
change you’ll see in SourceTree is the new design. We gathered a lot of feedback around the user experience so not only have we updated SourceTree with a modern look and feel, we’ve also overhauled tabs to improve your repository browsing experience, with a specific focus on finding and cloning your remote repositories. We’ve added more vibrant colors, improved workflow for common operations, and we’ve increased performance by refactoring the bookmarks sidebar. .
Blazing fast performance
Many of you have voiced your concerns about the performance of SourceTree on Windows and we heard you loud and clear. By adding a hybrid LibGit2 handler under the hood for most git operations we were able to improve performance in some cases by almost 2x. Here are the performance tests we ran comparing 2.0 to 1.10 – the results speak for themselves:
And by all means don’t take our word for it, and see for yourself just how much faster performance is in this new release!
Support for Git Virtual File System
For all the great things about Git, a common complaint is how difficult it can be to work with large repositories. Git Large File Storage (LFS) helps alleviate these issues when your repository contains large files, but doesn’t help when you have lots of files or content in your repository. To help with this Microsoft announced Git Virtual File System (GVFS) at Git Merge this year, which “virtualizes the file system beneath your repo and makes it appear as though all the files in your repo are present, but in reality only downloads a file the first time it is opened.” So for those working on large repositories that typically deal with a small section of the codebase, using GVFS means you only download what you need rather than the entire repository. This in turn results in faster performance for common operations like checkout and status and improves the experience of using Git as a whole.
, enabling you to combine a beautifully simple UI alongside a great technology that makes handling large repositories easier than ever. We’re excited to support GVFS in 2.0, and the same sentiment is shared by Microsoft:
“We’re excited that GVFS is supported in a widely used git client like SourceTree, and we love the new look and feel in 2.0.”
Jeremy Epling, Principal Program Manager on Microsoft TFS & Visual Studio Team Services
Get started today
We’re proud to continue supporting all of the Windows developers out there using SourceTree, and we hope you’re as about all the great new features and improvements in SourceTree for Windows 2.0. Upgrade or download it today and tell us what you think!
Using SourceTree 1.9 or earlier?
We implemented a change in the way we roll out updates (announced here
) late last year, so if you’re using SourceTree for Windows 1.9 or earlier you will not see auto updates for 2.0. Please download 2.0 directly from our website
Download SourceTree free
By Kelvin Yap on February 10, 2017
Connect to your Bitbucket or GitHub accounts securely and with ease in the latest versions of SourceTree for Windows and Mac. These versions of SourceTree fully OAuth 2.0. Users with Two-Factor Authentication (2FA) enabled can connect to both services via OAuth and be guided through the standard two-factor login flow. Navigate to the Account Management screen to update your already connected accounts from Basic to OAuth today!
Also, gone are the days of manually creating and storing SSH keys via command line. Released in version 2.4 for Mac, SourceTree automates the whole process with a single click of a button. Whenever you edit an existing account or add a new one you’ll notice a new “Generate Key” button on the Account Details screen.
of SourceTree for Mac and Windows and take advantage of these new features (and various bug fixes/enhancements) today!
Download SourceTree free
By Mike on January 27, 2017
We’ve added a ton of new features and improvements in this release:
- Manage your bookmarks easily with a new and colorful tab design
- Huge performance improvements
- Pixel-perfect per-monitor DPI support
Tabs and Header
We implemented a new tab-centric design to increase vertical space and to give readability to the the repository you’re currently working in. The new header design gives you an additional 20px vertically, while the removal of the bookmarks sidebar gives you 250px horizontally.
Before (left) and after
The New Tab….Tab
The repository browser now lives in the New Tab. The old sidebar crammed repository names and had a confusing relationship to your remote repositories. Now you have a dedicated experience for both in a full window. This approach also frees up more space to focus on code once you’re in a repository.
SourceTree for Windows 2.0 is screaming fast. We improved performance by adding a hybrid LibGit2 handler for most git operations. In many cases, performance for most operations increased by almost 2x. Look how fast reading stashes are with LibGit2!
Many primary feature workflows have been rethought and improved. Compare the steps needed for creating a remote repo in the current version of SourceTree, vs the new workflow. In 2.0, creating a remote repository and managing your remote accounts is front-and-center rather than living 2-3 menus or pop-up dialogs deep.
Before (left) and after
Animations, more vibrant colors, improved contrast, and per-monitor DPI support are just a few of the improvements we’ve made. Note the removal of the Windows 2000 era pinstripes, vivid colors, and branch label readability improvements. We’ve improved contrast in many areas by tweaking our use of gray colors, and added accents to window dialogs and notifications.
Before (left) and after
Per-monitor DPI support
On systems that support per-monitor DPI settings (Windows 10 Anniversary), SourceTree will automatically adjust icons and text to be crisp and pixel perfect when the window is moved between monitors. SourceTree will still use high-DPI icons and scale properly even if your OS doesn’t support per-monitor DPI and you still have a high-DPI monitor or laptop.
Before (left) and after
Readability has been improved on the sidebar, with more spacing between text and increased vertical spacing.
Before (left) and after
Additionally, the ahead/behind indicator will now float on the right-side of the sidebar, and will be visible even if there’s a scroll-bar in either direction.
Before (left) and after
Download the beta and check out all the new improvements today!
Download SourceTree for Windows 2.0 beta
By Mike on December 13, 2016
There have been a few reports of memory leaks in recent versions of SourceTree for Windows. We understand these kinds of issues can adversely affect the SourceTree experience and are important to identify and address.
Identifying the leaky object
How does a memory leak appear? Most of the time it’s a fairly simple case of “I created some objects, and when I was done using those objects something was still referencing them”. In this case, identifying what was leaking in SourceTree was an easy task:
Determining the cause
Most of the time the cause of a leak is easy to spot:
- An event handler is still subscribed
- The object is not being removed from a list or is still held on to as a direct reference
- An unmanaged object wasn’t disposed/cleaned up
owever, the real difficulty isn’t figuring out if you have a leak – . In this case, I suspected that our UI library that quickly draws the sidebar was doing something wrong, and that it might be holding onto objects that it shouldn’t. After looking at the memory dump it was clear that assumption was correct:
more than 4x the correct number of nodes. Okay, so now we know that it involves the SidebarNode and the objects. The TreeNode holds a reference to the object it’s showing to the user, so something must be keeping a reference of it around, which is keeping our massive count of SidebarNodes around too.
After taking a peek into the the TreeNode class, there were a few issues (oops):
- A subscription to an event handler wasn’t unsubscribed
- The TreeNode objects were added to a cache and never removed from that cache
After running the tests, it appeared that the leak was fixed. As mentioned earlier this fix has been rolled out in 1.9.9 for Windows, and should address the memory issues we were seeing. Check it out for yourself!
Download SourceTree for Windows
By Kelvin Yap on December 5, 2016
We’ve been hard at work squashing bugs, fixing crashes, patching and upgrading parts of SourceTree for Windows in version 1.9.9. Remember that annoying memory leak in the TreeView? Patched. Want support for Git LFS 1.5.2? We’ve added that. Feel free to check that Spell Checker checkbox too – we’ve provided safeguards to protect against Windows’ own spellchecker performance issues. Performance when switching tabs have been improved too. And that’s just the tip of the iceberg.
We want to give a big shout out to members of our Beta community. Your participation helps us identify and fix the biggest pain points; thank you! And if you’re interested in joining the beta program you can do so here.
Download 22.214.171.124 today to get these improvements.
Download SourceTree for Windows