Improve visual representation when comparing 2 branches

Current situation

When comparing two branches (e.g. https://gitlab.com/gitlab-org/gitlab-ce/compare/master...10-2-stable), the URL and the title in the breadcrumbs show master...10-2-stable, while the UI elements show 10-2-stable...master.

image

From git user perspective, showing 10-2-stable...master in the UI is wrong.

Proposal

We might want to consider swapping the Source and Target fields, to represent the same order as the URL. But then it would be weird to find Target before Source. So maybe rename those fields. When clicking the compare button, it takes you to https://gitlab.com/gitlab-org/gitlab-ce/compare?from=master&to=10-2-stable, so the names From and To might be an option.

Alternative

If we chose to keep the order of the fields, we should change the ... to something else.

I was checking out the mathematical operator \cap, but it does not correctly represent what we need (see https://en.wikipedia.org/wiki/Intersection_(set_theory)). The correct notation would be source \setminus target (see https://en.wikipedia.org/wiki/Complement_(set_theory)#Relative_complement). But I'm not sure that would be clear to most people:

image

cc @dimitrieh @tauriedavis