Consistently use monospace font for commit SHAs and branch and tag names

ff82acf3 · Douwe Maan · c266b5f5 · ff82acf3 · ff82acf3 · ff82acf3
Commit ff82acf3 authored May 11, 2017 by Douwe Maan
78 changed files
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -33,7 +33,7 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
            <span>
              {{ __('FirstPushedBy|First') }}
              <span class="commit-icon">${iconCommit}</span>
-              <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
+              <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
              {{ __('FirstPushedBy|pushed by') }}
              <a :href="commit.author.webUrl" class="commit-author-link">
                {{ commit.author.name }}

--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -26,9 +26,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
            <h5 class="item-title">
              <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
              <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
              <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
            </h5>
            <span>
              <a :href="build.url" class="build-date">{{ build.date }}</a>

--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
@@ -29,9 +29,9 @@ global.cycleAnalytics.StageTestComponent = Vue.extend({
              &middot;
              <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
              <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
              <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
            </h5>
            <span>
              <a :href="build.url" class="issue-date">

--- a/app/assets/javascripts/pipelines/components/pipeline_url.js
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.js
@@ -29,7 +29,7 @@ export default {
      </a>
      <span
        v-if="!user"
-        class="js-pipeline-url-api api monospace">
+        class="js-pipeline-url-api api">
        API
      </span>
      <span

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -61,7 +61,8 @@ export default {
        </span>
      </div>
      <div class="normal">
-        <b>Request to merge</b>
+        <strong>
+          Request to merge
          <span
            class="label-branch"
            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
@@ -76,7 +77,7 @@ export default {
              aria-hidden="true"
              class="fa fa-clipboard"></i>
          </button>
-        <b>into</b>
+          into
          <span
            class="label-branch"
            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
@@ -87,6 +88,7 @@ export default {
              {{mr.targetBranch}}
            </a>
          </span>
+        </strong>
        <span
          v-if="shouldShowCommitsBehindText"
          class="diverged-commits-count">

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
@@ -54,6 +54,9 @@ export default {
              :href="mr.pipeline.path"
              class="pipeline-id">#{{mr.pipeline.id}}</a>
            {{mr.pipeline.details.status.label}}
+          </span>
+          <span
+            v-if="mr.pipeline.details.stages.length > 0">
            with {{stageText}}
          </span>
          <div class="mr-widget-pipeline-graph">
@@ -70,7 +73,7 @@ export default {
            for
            <a
              :href="mr.pipeline.commit.commit_path"
-              class="monospace js-commit-link">
+              class="commit-sha js-commit-link">
              {{mr.pipeline.commit.short_id}}</a>.
          </span>
          <span

--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -119,14 +119,14 @@ export default {
      </div>
      <a v-if="hasCommitRef"
-        class="monospace branch-name"
+        class="ref-name"
        :href="commitRef.ref_url">
        {{commitRef.name}}
      </a>
      <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
-      <a class="commit-id monospace"
+      <a class="commit-sha"
        :href="commitUrl">
        {{shortSha}}
      </a>

--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -2,7 +2,7 @@
 * Styles that apply to all GFM related forms.
 */
+.gfm-commit,
 .gfm-commit_range {
-  font-family: $monospace_font;
+  @extend .commit-sha;
-  font-size: 90%;
 }
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -289,11 +289,6 @@ pre {
  }
 }
-.monospace {
-  font-family: $monospace_font;
-  font-size: 90%;
-}
 code {
  &.key-fingerprint {
    background: $body-bg;
@@ -305,6 +300,24 @@ a > code {
  color: $link-color;
 }
+.monospace {
+  font-family: $monospace_font;
+}
+.commit-sha,
+.ref-name {
+  @extend .monospace;
+  font-size: 95%;
+}
+.git-revision-dropdown-toggle {
+  @extend .monospace;
+}
+.git-revision-dropdown .dropdown-content ul li a {
+  @extend .ref-name;
+}
 /**
 * Apply Markdown typography
 *

--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -12,10 +12,14 @@
    }
    &.branch-info {
-      .monospace,
+      .commit-sha,
      .commit-info {
        margin-left: 4px;
      }
+      .ref-name {
+        font-size: 12px;
+      }
    }
  }

--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -206,11 +206,11 @@
      margin-left: $gl-padding;
    }
  }
-}
-.commit-short-id {
+  .commit-sha {
-  font-family: $monospace_font;
+    font-size: 14px;
    font-weight: 600;
+  }
 }
 .commit,
@@ -271,7 +271,7 @@
    }
  }
-  .commit-id {
+  .commit-sha {
    color: $gl-link-color;
  }

--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -387,7 +387,7 @@
        padding: 0 3px 0 0;
      }
-      .branch-name {
+      .ref-name {
        color: $black;
        display: inline-block;
        max-width: 180px;
@@ -398,7 +398,7 @@
        vertical-align: top;
      }
-      .short-sha {
+      .commit-sha {
        color: $gl-link-color;
        line-height: 1.3;
        vertical-align: top;

--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -2,11 +2,6 @@
 .diff-file {
  margin-bottom: $gl-padding;
-  .commit-short-id {
-    font-family: $regular_font;
-    font-weight: 400;
-  }
  .file-title,
  .file-title-flex-parent {
    cursor: pointer;

--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -90,7 +90,7 @@
    }
    .build-link,
-    .branch-name {
+    .ref-name {
      color: $gl-text-color;
    }
@@ -135,7 +135,7 @@
    }
    .branch-commit {
-      .commit-id {
+      .commit-sha {
        margin-right: 0;
      }
    }

--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -156,6 +156,34 @@
    text-transform: capitalize;
  }
+  .label-branch {
+    @extend .ref-name;
+    color: $gl-text-color;
+    font-weight: bold;
+    overflow: hidden;
+    margin: 0 3px;
+    word-break: break-all;
+    &.label-truncated {
+      position: relative;
+      display: inline-block;
+      width: 250px;
+      margin-bottom: -3px;
+      white-space: nowrap;
+      text-overflow: clip;
+      line-height: 14px;
+      &::after {
+        position: absolute;
+        content: '...';
+        right: 0;
+        font-family: $regular_font;
+        background-color: $gray-light;
+      }
+    }
+  }
  .js-deployment-link {
    display: inline-block;
  }
@@ -355,34 +383,6 @@
  }
 }
-.label-branch {
-  color: $gl-text-color;
-  font-family: $monospace_font;
-  font-weight: bold;
-  overflow: hidden;
-  font-size: 90%;
-  margin: 0 3px;
-  word-break: break-all;
-  &.label-truncated {
-    position: relative;
-    display: inline-block;
-    width: 250px;
-    margin-bottom: -3px;
-    white-space: nowrap;
-    text-overflow: clip;
-    line-height: 14px;
-    &::after {
-      position: absolute;
-      content: '...';
-      right: 0;
-      font-family: $regular_font;
-      background-color: $gray-light;
-    }
-  }
-}
 .commits-empty {
  text-align: center;

--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -238,11 +238,6 @@ ul.notes {
          ul {
            margin: 3px 0 3px 16px !important;
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
          }
          p:first-child {

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -158,9 +158,13 @@
    float: none;
  }
+  .api {
+    @extend .monospace;
+  }
  .branch-commit {
-    .branch-name {
+    .ref-name {
      font-weight: bold;
      max-width: 120px;
      overflow: hidden;
@@ -182,7 +186,7 @@
      color: $gl-text-color;
    }
-    .commit-id {
+    .commit-sha {
      color: $gl-link-color;
    }

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -657,9 +657,8 @@ pre.light-well {
    color: $gl-text-color;
  }
-  .commit_short_id {
+  .commit-sha {
    margin-right: 5px;
-    color: $gl-link-color;
    font-weight: 600;
  }
@@ -825,7 +824,8 @@ pre.light-well {
 }
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
    width: 100%;
    @media (min-width: $screen-sm-min) {
@@ -844,14 +844,6 @@ pre.light-well {
      width: auto;
    }
  }
-  .inline-input-group {
-    width: 100%;
-    @media (min-width: $screen-sm-min) {
-      width: 250px;
-    }
-  }
 }
 .clearable-input {

--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -74,12 +74,8 @@ module CommitsHelper
  # Returns the sorted alphabetically links to branches, separated by a comma
  def commit_branches_links(project, branches)
    branches.sort.map do |branch|
-      link_to(
+      link_to(project_ref_path(project, branch), class: "label label-gray ref-name") do
-        namespace_project_tree_path(project.namespace, project, branch)
+        icon('code-fork') + " #{branch}"
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('code-fork') + ' ' + branch
-        end
      end
    end.join(" ").html_safe
  end
@@ -88,13 +84,8 @@ module CommitsHelper
  def commit_tags_links(project, tags)
    sorted = VersionSorter.rsort(tags)
    sorted.map do |tag|
-      link_to(
+      link_to(project_ref_path(project, tag), class: "label label-gray ref-name") do
-        namespace_project_commits_path(project.namespace, project,
+        icon('tag') + " #{tag}"
-                                       project.repository.find_tag(tag).name)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('tag') + ' ' + tag
-        end
      end
    end.join(" ").html_safe
  end
@@ -198,8 +189,8 @@ module CommitsHelper
                                  tree_join(commit_sha, diff_new_path)),
      class: 'btn view-file js-view-file'
    ) do
-      raw('View file @') + content_tag(:span, commit_sha[0..6],
+      raw('View file @ ') + content_tag(:span, Commit.truncate_sha(commit_sha),
-                                       class: 'commit-short-id')
+                                       class: 'commit-sha')
    end
  end

--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -98,7 +98,7 @@ module DiffHelper
    [
      content_tag(:span, link_to(truncate(blob.name, length: 40), tree)),
      '@',
-      content_tag(:span, commit_id, class: 'monospace')
+      content_tag(:span, commit_id, class: 'commit-sha')
    ].join(' ').html_safe
  end

--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -164,9 +164,14 @@ module EventsHelper
  def event_note_title_html(event)
    if event.note_target
-      link_to(event_note_target_path(event), title: event.target_title, class: 'has-tooltip') do
+      text = raw("#{event.note_target_type} ") +
-        "#{event.note_target_type} #{event.note_target_reference}"
+        if event.commit_note?
+          content_tag(:span, event.note_target_reference, class: 'commit-sha')
+        else
+          event.note_target_reference
        end
+      link_to(text, event_note_target_path(event), title: event.target_title, class: 'has-tooltip')
    else
      content_tag(:strong, '(deleted)')
    end

--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -54,6 +54,10 @@ module GitlabRoutingHelper
    namespace_project_builds_path(project.namespace, project, *args)
  end
+  def project_ref_path(project, ref_name, *args)
+    namespace_project_commits_path(project.namespace, project, ref_name, *args)
+  end
  def project_container_registry_path(project, *args)
    namespace_project_container_registry_index_path(project.namespace, project, *args)
  end

--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -24,10 +24,13 @@ module TodosHelper
  end
  def todo_target_link(todo)
-    target = todo.target_type.titleize.downcase
+    text = raw("#{todo.target_type.titleize.downcase} ") +
-    link_to "#{target} #{todo.target_reference}", todo_target_path(todo),
+      if todo.for_commit?
-      class: 'has-tooltip',
+        content_tag(:span, todo.target_reference, class: 'commit-sha')
-      title: todo.target.title
+      else
+        todo.target_reference
+      end
+    link_to text, todo_target_path(todo), class: 'has-tooltip', title: todo.target.title
  end
  def todo_target_path(todo)

--- a/app/models/issue.rb
+++ b/app/models/issue.rb
--- a/app/models/project_services/chat_message/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -35,7 +35,7 @@ module ChatMessage
    def activity
      {
-        title: "Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status}",
+        title: "Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status}",
        subtitle: "in #{project_link}",
        text: "in #{pretty_duration(duration)}",
        image: user_avatar || ''
@@ -45,7 +45,7 @@ module ChatMessage
    private
    def message
-      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
+      "#{project_link}: Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
    end
    def humanized_status
@@ -70,7 +70,7 @@ module ChatMessage
    end
    def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
    end
    def project_link

--- a/app/models/project_services/chat_message/push_message.rb
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -61,7 +61,7 @@ module ChatMessage
    end
    def removed_branch_message
-      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
+      "#{user_name} removed #{ref_type} `#{ref}` from #{project_link}"
    end
    def push_message
@@ -102,7 +102,7 @@ module ChatMessage
    end
    def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
    end
    def project_link

--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -38,10 +38,7 @@ class PipelineEntity < Grape::Entity
    expose :path do |pipeline|
      if pipeline.ref
-        namespace_project_tree_path(
+        project_ref_path(pipeline.project, pipeline.ref)
-          pipeline.project.namespace,
-          pipeline.project,
-          id: pipeline.ref)
      end
    end

--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -3,6 +3,7 @@ module RequestAwareEntity
  included do
    include Gitlab::Routing
+    include GitlabRoutingHelper
    include Gitlab::Allowable
  end

--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -26,7 +26,7 @@
              - commit = discussion.noteable
              - if commit
                commit
-                = link_to commit.short_id, url, class: 'monospace'
+                = link_to commit.short_id, url, class: 'commit-sha'
              - else
                a deleted commit
            - elsif discussion.diff_discussion?

--- a/app/views/events/_commit.html.haml
+++ b/app/views/events/_commit.html.haml
 %li.commit
  .commit-row-title
-    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit_short_id", alt: '', title: truncate_sha(commit[:id])
+    = link_to truncate_sha(commit[:id]), namespace_project_commit_path(project.namespace, project, commit[:id]), class: "commit-sha", alt: '', title: truncate_sha(commit[:id])
    &middot;
    = markdown event_commit_title(commit[:message]), project: project, pipeline: :single_line, author: event.author
--- a/app/views/projects/_last_commit.html.haml
+++ b/app/views/projects/_last_commit.html.haml
@@ -5,7 +5,7 @@
    = ci_icon_for_status(status)
    = ci_text_for_status(status)
-= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha"
 = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
 &middot;
 #{time_ago_with_tooltip(commit.committed_date)} by

--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -5,7 +5,7 @@
        .event-last-push
          .event-last-push-text
            %span You pushed to
-            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name) do
+            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name, class: 'commit-sha') do
              %strong= event.ref_name
            - if @project && event.project != @project
              %span at

--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -22,7 +22,7 @@
                    %strong
                      = link_to_gfm truncate(commit.title, length: 35), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "cdark"
                    .pull-right
-                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "monospace"
+                      = link_to commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit), class: "commit-sha"
                    &nbsp;
                  .light
                    = commit_author_link(commit, avatar: false)

--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -6,7 +6,8 @@
 - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
 %li{ class: "js-branch-#{branch.name}" }
  %div
-    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
+    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated ref-name' do
+      = icon('code-fork')
      = branch.name
    &nbsp;
    - if branch.name == @repository.root_ref

--- a/app/views/projects/branches/_commit.html.haml
+++ b/app/views/projects/branches/_commit.html.haml
 .branch-commit
  .icon-container.commit-icon
    = custom_icon("icon_commit")
-  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-id monospace"
+  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-sha"
  &middot;
  %span.str-truncated
    = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"

--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -20,7 +20,7 @@
    .col-sm-10.create-from
      .dropdown
        = hidden_field_tag :ref, default_ref
-        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
          .text-left.dropdown-toggle-text= default_ref
          = icon('chevron-down')
        = render 'shared/ref_dropdown', dropdown_class: 'wide'

--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -6,18 +6,16 @@
    = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
    %strong
      Job
-      = link_to namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id' do
+      = link_to "##{@build.id}", namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id'
-        \##{@build.id}
    in pipeline
-    = link_to pipeline_path(pipeline) do
+    %strong
-      %strong ##{pipeline.id}
+      = link_to "##{pipeline.id}", pipeline_path(pipeline)
-    for commit
+    for
-    = link_to namespace_project_commit_path(@project.namespace, @project, pipeline.sha) do
+    %strong
-      %strong= pipeline.short_sha
+      = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: 'commit-sha'
    from
-    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
+    %strong
-      %code
+      = link_to @build.ref, project_ref_path(@project, @build.ref), class: 'ref-name'
-        = @build.ref
    = render "projects/builds/user" if @build.user

--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -23,14 +23,14 @@
      - if job.ref
        .icon-container
          = job.tag? ? icon('tag') : icon('code-fork')
-        = link_to job.ref, namespace_project_commits_path(job.project.namespace, job.project, job.ref), class: "monospace branch-name"
+        = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
      - else
        .light none
      .icon-container.commit-icon
        = custom_icon("icon_commit")
    - if commit_sha
-      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-id monospace"
+      = link_to job.short_sha, namespace_project_commit_path(job.project.namespace, job.project, job.sha), class: "commit-sha"
    - if job.stuck?
      = icon('warning', class: 'text-warning has-tooltip', title: 'Job is stuck. Check runners.')
@@ -58,7 +58,7 @@
      - if pipeline.user
        = user_avatar(user: pipeline.user, size: 20)
      - else
-        %span.monospace API
+        %span.api API
  - if admin
    %td

--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
 .page-content-header
  .header-main-content
-    %strong Commit #{@commit.short_id}
+    %strong
+      Commit
+      %span.commit-sha= @commit.short_id
    = clipboard_button(text: @commit.id, title: "Copy commit SHA to clipboard")
    %span.hidden-xs authored
    #{time_ago_with_tooltip(@commit.authored_date)}
@@ -57,7 +59,7 @@
      = custom_icon("icon_commit")
    %span.cgray= pluralize(@commit.parents.count, "parent")
    - @commit.parents.each do |parent|
-      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
+      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "commit-sha"
    %span.commit-info.branches
      %i.fa.fa-spinner.fa-spin
@@ -68,9 +70,10 @@
        = link_to namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id) do
          = ci_icon_for_status(last_pipeline.status)
      Pipeline
-      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id), class: "monospace"
+      = link_to "##{last_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, last_pipeline.id)
      = ci_label_for_status(last_pipeline.status)
      - if last_pipeline.stages.any?
+        with #{"stage".pluralize(last_pipeline.stages.count)}
        .mr-widget-pipeline-graph
          = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
      in

--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
-.pipeline-graph-container
-  .row-content-block.build-content.middle-block.pipeline-actions
-    .pull-right
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        - if pipeline.builds.latest.failed.any?(&:retryable?)
-          = link_to "Retry", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'js-retry-button btn btn-grouped btn-primary', method: :post
-        - if pipeline.builds.running_or_pending.any?
-          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
-    .oneline.clearfix
-      - if defined?(pipeline_details) && pipeline_details
-        Pipeline
-        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-        with
-        = pluralize pipeline.statuses.count(:id), "job"
-        - if pipeline.ref
-          for
-          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-        - if defined?(link_to_commit) && link_to_commit
-          for commit
-          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-        - if pipeline.duration
-          in
-          = time_interval_in_words pipeline.duration
-  .row-content-block.build-content.middle-block.js-pipeline-graph.hidden
-    = render "projects/pipelines/graph", pipeline: pipeline
- if pipeline.yaml_errors.present?
-  .bs-callout.bs-callout-danger
-    %h4 Found errors in your .gitlab-ci.yml:
-    %ul
-      - pipeline.yaml_errors.split(",").each do |error|
-        %li= error
-    You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
- if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
-  .bs-callout.bs-callout-warning
-    \.gitlab-ci.yml not found in this commit
-.table-holder.pipeline-holder
-  %table.table.ci-table.pipeline
-    %thead
-      %tr
-        %th Status
-        %th Job ID
-        %th Name
-        %th
-        %th Coverage
-        %th
-    = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
- if @branches.any?
+- if @branches.any? || @tags.any?
-  %span
  - branch = commit_default_branch(@project, @branches)
-    = link_to(namespace_project_tree_path(@project.namespace, @project, branch)) do
+  = link_to(project_ref_path(@project, branch), class: "label label-gray ref-name") do
-      %span.label.label-gray
+    = icon('code-fork')
    = branch
+  -# `commit_default_branch` deletes the default branch from `@branches`,
+  -# so only render this if we have more branches left
  - if @branches.any? || @tags.any?
-      = link_to("#", class: "js-details-expand") do
+    %span
-        %span.label.label-gray
+      = link_to "…", "#", class: "js-details-expand label label-gray"
-          \...
      %span.js-details-content.hide
-        - if @branches.any?
+        = commit_branches_links(@project, @branches) if @branches.any?
-          = commit_branches_links(@project, @branches)
+        = commit_tags_links(@project, @tags) if @tags.any?
-        - if @tags.any?
-          = commit_tags_links(@project, @tags)
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -37,6 +37,6 @@
      .commit-actions.flex-row.hidden-xs
        - if commit.status(ref)
          = render_commit_status(commit, ref: ref)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha btn btn-transparent"
        = clipboard_button(text: commit.id, title: "Copy commit SHA to clipboard")
        = link_to_browse_code(project, commit)
--- a/app/views/projects/commits/_inline_commit.html.haml
+++ b/app/views/projects/commits/_inline_commit.html.haml
 %li.commit.inline-commit
  .commit-row-title
-    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+    = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-sha"
    &nbsp;
    %span.str-truncated
      = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"

--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -7,7 +7,7 @@
      .input-group.inline-input-group
        %span.input-group-addon from
        = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
          .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
      = render 'shared/ref_dropdown'
    .compare-ellipsis.inline ...
@@ -15,7 +15,7 @@
      .input-group.inline-input-group
        %span.input-group-addon to
        = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
          .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
      = render 'shared/ref_dropdown'
    &nbsp;

--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -6,10 +6,10 @@
  .sub-header-block
    Compare Git revisions.
    %br
-    Fill input field with commit id like
+    Fill input field with commit SHA like
-    %code.label-branch 4eedf23
+    %code.ref-name 4eedf23
    or branch/tag name like
-    %code.label-branch master
+    %code.ref-name master
    and press compare button for the commits list and a code diff.
    %br
    Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.

--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -16,9 +16,9 @@
          There isn't anything to compare.
        %p.slead
          - if params[:to] == params[:from]
-            %span.label-branch= params[:from]
+            %span.ref-name= params[:from]
            and
-            %span.label-branch= params[:to]
+            %span.ref-name= params[:to]
            are the same.
          - else
            You'll need to use different branch names to get a valid comparison.
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -2,10 +2,10 @@
  - if deployment.ref
    .icon-container
      = deployment.tag? ? icon('tag') : icon('code-fork')
-    = link_to deployment.ref, namespace_project_commits_path(@project.namespace, @project, deployment.ref), class: "monospace branch-name"
+    = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
  .icon-container.commit-icon
    = custom_icon("icon_commit")
-  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-id monospace"
+  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
  %p.commit-title
    %span

--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -27,7 +27,7 @@
        = custom_icon("icon_commit")
    - if commit_sha
-      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-id monospace"
+      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-sha"
    - if retried
      = icon('warning', class: 'text-warning has-tooltip', title: 'Status was retried.')
@@ -48,7 +48,7 @@
      - if generic_commit_status.pipeline.user
        = user_avatar(user: generic_commit_status.pipeline.user, size: 20)
      - else
-        %span.monospace API
+        %span.api API
  - if admin
    %td

--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -11,5 +11,4 @@
            = render_pipeline_status(pipeline)
        %span.related-branch-info
          %strong
-            = link_to namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "label-branch" do
+            = link_to branch, namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "ref-name"
-              = branch
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -37,7 +37,7 @@
      by #{link_to_member(@project, merge_request.author, avatar: false)}
      - if merge_request.target_project.default_branch != merge_request.target_branch
        &nbsp;
-        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+        = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
          = icon('code-fork')
          = merge_request.target_branch

--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -21,8 +21,8 @@
                  selected: f.object.source_project_id
          .merge-request-select.dropdown
            = f.hidden_field :source_branch
-            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
+            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch git-revision-dropdown-toggle" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch
+            .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch.git-revision-dropdown
              = dropdown_title("Select source branch")
              = dropdown_filter("Search branches")
              = dropdown_content do
@@ -51,8 +51,8 @@
                  selected: f.object.target_project_id
          .merge-request-select.dropdown
            = f.hidden_field :target_branch
-            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch" }
+            = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch git-revision-dropdown-toggle" }
-            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown
+            .dropdown-menu.dropdown-menu-selectable.dropdown-target-branch.js-target-branch-dropdown.git-revision-dropdown
              = dropdown_title("Select target branch")
              = dropdown_filter("Search branches")
              = dropdown_content do

--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -3,9 +3,9 @@
 %p.slead
  - source_title, target_title = format_mr_branch_names(@merge_request)
  From
-  %strong.label-branch= source_title
+  %strong.ref-name= source_title
  %span into
-  %strong.label-branch= target_title
+  %strong.ref-name= target_title
  %span.pull-right
    = link_to 'Change branches', mr_change_branches_path(@merge_request)

--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -20,12 +20,15 @@
              - @merge_request_diffs.each do |merge_request_diff|
                %li
                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff, @start_sha), class: ('is-active' if merge_request_diff == @merge_request_diff) do
+                    %div
                      %strong
                        - if merge_request_diff.latest?
                          latest version
                        - else
                          version #{version_index(merge_request_diff)}
-                    .monospace= short_sha(merge_request_diff.head_commit_sha)
+                    %div
+                      %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                    %div
                      %small
                        #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
                        = time_ago_with_tooltip(merge_request_diff.created_at)
@@ -34,11 +37,10 @@
        and
        %span.dropdown.inline.mr-version-compare-dropdown
          %a.btn.btn-default.dropdown-toggle{ data: {toggle: :dropdown} }
-            %span
            - if @start_version
              version #{version_index(@start_version)}
            - else
-                #{@merge_request.target_branch}
+              %span.ref-name= @merge_request.target_branch
            = icon('caret-down')
          .dropdown-menu.dropdown-select.dropdown-menu-selectable
            .dropdown-title
@@ -50,19 +52,25 @@
                - @comparable_diffs.each do |merge_request_diff|
                  %li
                    = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff, merge_request_diff.head_commit_sha), class: ('is-active' if merge_request_diff == @start_version) do
+                      %div
                        %strong
                          - if merge_request_diff.latest?
                            latest version
                          - else
                            version #{version_index(merge_request_diff)}
-                      .monospace= short_sha(merge_request_diff.head_commit_sha)
+                      %div
+                        %small.commit-sha= short_sha(merge_request_diff.head_commit_sha)
+                      %div
                        %small
                          = time_ago_with_tooltip(merge_request_diff.created_at)
                %li
                  = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_version) do
+                    %div
                      %strong
-                      #{@merge_request.target_branch} (base)
+                        %span.ref-name= @merge_request.target_branch
-                    .monospace= short_sha(@merge_request_diff.base_commit_sha)
+                        (base)
+                    %div
+                      %strong.commit-sha= short_sha(@merge_request_diff.base_commit_sha)
    - if different_base?(@start_version, @merge_request_diff)
      .content-block

--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -19,7 +19,7 @@
  .form-group
    .col-md-6
      = f.label :ref, 'Target Branch', class: 'label-light'
-      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
+      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
      = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
  .form-group
    .col-md-6

--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -4,7 +4,7 @@
      = pipeline_schedule.description
    %td.branch-name-cell
      = icon('code-fork')
-      = link_to pipeline_schedule.ref, namespace_project_commits_path(@project.namespace, @project, pipeline_schedule.ref), class: "branch-name"
+      = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
    %td
      - if pipeline_schedule.last_pipeline
        .status-icon-container{ class: "ci-status-icon-#{pipeline_schedule.last_pipeline.status}" }

--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -30,7 +30,7 @@
      = pluralize @pipeline.statuses.count(:id), "job"
      - if @pipeline.ref
        from
-        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+        = link_to @pipeline.ref, project_ref_path(@project, @pipeline.ref), class: "ref-name"
      - if @pipeline.duration
        in
        = time_interval_in_words(@pipeline.duration)
@@ -40,10 +40,10 @@
  .well-segment.branch-info
    .icon-container.commit-icon
      = custom_icon("icon_commit")
-    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha js-details-short"
    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
      %span.text-expander
        \...
    %span.js-details-content.hide
-      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "commit-sha commit-hash-full"
    = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -11,8 +11,8 @@
    .col-sm-10
      = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
      = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
+                     options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search branches",
                                data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
      .help-block Existing branch name, tag
  .form-actions

--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
 = f.hidden_field(:name)
 = dropdown_tag('Select branch or create wildcard',
-               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide',
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide git-revision-dropdown-toggle',
-                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search protected branches",
                          footer_content: true,
                          data: { show_no: true, show_any: true, show_upcoming: true,
                                  selected: params[:protected_branch_name],

--- a/app/views/projects/protected_branches/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/_matching_branch.html.haml
 %tr
  %td
-    = link_to matching_branch.name, namespace_project_tree_path(@project.namespace, @project, matching_branch.name)
+    = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name'
    - if @project.root_ref?(matching_branch.name)
      %span.label.label-info.prepend-left-5 default
  %td
    - commit = @project.commit(matching_branch.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
    = time_ago_with_tooltip(commit.committed_date)
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
 %tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch) } }
  %td
-    = protected_branch.name
+    %span.ref-name= protected_branch.name
    - if @project.root_ref?(protected_branch.name)
      %span.label.label-info.prepend-left-5 default
  %td
@@ -9,7 +10,7 @@
      = link_to pluralize(matching_branches.count, "matching branch"), namespace_project_protected_branch_path(@project.namespace, @project, protected_branch)
    - else
      - if commit = protected_branch.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
        = time_ago_with_tooltip(commit.committed_date)
      - else
        (branch was removed from repository)

--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -2,7 +2,7 @@
 .row.prepend-top-default.append-bottom-default
  .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
      = @protected_ref.name
  .col-lg-9

--- a/app/views/projects/protected_tags/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/_dropdown.html.haml
 = f.hidden_field(:name)
 = dropdown_tag('Select tag or create wildcard',
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide',
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide git-revision-dropdown-toggle',
-                          filter: true, dropdown_class: "dropdown-menu-selectable  capitalize-header", placeholder: "Search protected tag",
+                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: "Search protected tag",
                          footer_content: true,
                          data: { show_no: true, show_any: true, show_upcoming: true,
                                  selected: params[:protected_tag_name],

--- a/app/views/projects/protected_tags/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/_matching_tag.html.haml
 %tr
  %td
-    = link_to matching_tag.name, namespace_project_tree_path(@project.namespace, @project, matching_tag.name)
+    = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name'
    - if @project.root_ref?(matching_tag.name)
      %span.label.label-info.prepend-left-5 default
  %td
    - commit = @project.commit(matching_tag.name)
-    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+    = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
    = time_ago_with_tooltip(commit.committed_date)
--- a/app/views/projects/protected_tags/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/_protected_tag.html.haml
 %tr.js-protected-tag-edit-form{ data: { url: namespace_project_protected_tag_path(@project.namespace, @project, protected_tag) } }
  %td
-    = protected_tag.name
+    %span.ref-name= protected_tag.name
    - if @project.root_ref?(protected_tag.name)
      %span.label.label-info.prepend-left-5 default
  %td
@@ -9,7 +10,7 @@
      = link_to pluralize(matching_tags.count, "matching tag"), namespace_project_protected_tag_path(@project.namespace, @project, protected_tag)
    - else
      - if commit = protected_tag.commit
-        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+        = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit-sha')
        = time_ago_with_tooltip(commit.committed_date)
      - else
        (tag was removed from repository)

--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -2,7 +2,7 @@
 .row.prepend-top-default.append-bottom-default
  .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.ref-name
      = @protected_ref.name
  .col-lg-9

--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
 %li.runner{ id: dom_id(runner) }
  %h4
    = runner_status_icon(runner)
-    %span.monospace
    - if @project_runners.include?(runner)
-        = link_to runner.short_sha, runner_path(runner)
+      = link_to runner.short_sha, runner_path(runner), class: 'commit-sha'
      - if runner.locked?
        = icon('lock', class: 'has-tooltip', title: 'Locked to current projects')
      %small
        = link_to edit_namespace_project_runner_path(@project.namespace, @project, runner) do
          %i.fa.fa-edit.btn
    - else
+      %span.commit-sha
        = runner.short_sha
    .pull-right

--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -2,8 +2,7 @@
 - release = @releases.find { |release| release.tag == tag.name }
 %li.flex-row
  .row-main-content.str-truncated
-    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
+    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'item-title ref-name' do
-      %span.item-title
      = icon('tag')
      = tag.name

--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -6,7 +6,9 @@
  .top-area.multi-line
    .nav-text
      .title
-        %span.item-title= @tag.name
+        %span.item-title.ref-name
+          = icon('tag')
+          = @tag.name
        - if protected_tag?(@project, @tag)
          %span.label.label-success
            protected

--- a/app/views/shared/_ref_dropdown.html.haml
+++ b/app/views/shared/_ref_dropdown.html.haml
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
-.dropdown-menu.dropdown-menu-selectable{ class: dropdown_class }
+.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: dropdown_class }
  = dropdown_title "Select Git revision"
  = dropdown_filter "Filter by Git revision"
  = dropdown_content

--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,8 +6,8 @@
  - @options && @options.each do |key, value|
    = hidden_field_tag key, value, id: nil
  .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown git-revision-dropdown-toggle" }
-    .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
      = dropdown_title "Switch branch/tag"
      = dropdown_filter "Search branches and tags"
      = dropdown_content

--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -10,14 +10,14 @@
    = form.label :source_branch, class: 'control-label'
    .col-sm-10
      .issuable-form-select-holder
-        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2', disabled: true })
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 ref-name', disabled: true })
 .form-group
  = form.label :target_branch, class: 'control-label'
  .col-sm-10.target-branch-select-dropdown-container
    .issuable-form-select-holder
      = form.select(:target_branch, issuable.target_branches,
        { include_blank: true },
-        { class: 'target_branch js-target-branch-select',
+        { class: 'target_branch js-target-branch-select ref-name',
          disabled: issuable.new_record?,
          data: { placeholder: "Select branch" }})
    - if issuable.new_record?

--- a/changelogs/unreleased/dm-consistent-commit-sha-style.yml
+++ b/changelogs/unreleased/dm-consistent-commit-sha-style.yml
+---
+title: Consistently use monospace font for commit SHAs and branch and tag names
+merge_request:
+author:
--- a/features/steps/project/builds/artifacts.rb
+++ b/features/steps/project/builds/artifacts.rb
@@ -25,7 +25,7 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps
  step 'I should see the build header' do
    page.within('.build-header') do
-      expect(page).to have_content "Job ##{@build.id} in pipeline ##{@pipeline.id} for commit #{@pipeline.short_sha}"
+      expect(page).to have_content "Job ##{@build.id} in pipeline ##{@pipeline.id} for #{@pipeline.short_sha}"
    end
  end

--- a/features/steps/project/forked_merge_requests.rb
+++ b/features/steps/project/forked_merge_requests.rb
@@ -5,6 +5,7 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
  include SharedPaths
  include Select2Helper
  include WaitForVueResource
+  include WaitForAjax
  step 'I am a member of project "Shop"' do
    @project = ::Project.find_by(name: "Shop")
@@ -47,6 +48,7 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
    first('.dropdown-target-project a', text: @project.path_with_namespace)
    first('.js-source-branch').click
+    wait_for_ajax
    first('.dropdown-source-branch .dropdown-content a', text: 'fix').click
    click_button "Compare branches and continue"
@@ -62,31 +64,6 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
    click_button "Submit merge request"
  end
-  step 'I follow the target commit link' do
-    commit = @project.repository.commit
-    click_link commit.short_id(8)
-  end
-  step 'I should see the commit under the forked from project' do
-    commit = @project.repository.commit
-    expect(page).to have_content(commit.message)
-  end
-  step 'I click "Create Merge Request on fork" link' do
-    click_link "Create Merge Request on fork"
-  end
-  step 'I see prefilled new Merge Request page for the forked project' do
-    expect(current_path).to eq new_namespace_project_merge_request_path(@forked_project.namespace, @forked_project)
-    expect(find("#merge_request_source_project_id").value).to eq @forked_project.id.to_s
-    expect(find("#merge_request_target_project_id").value).to eq @project.id.to_s
-    expect(find("#merge_request_source_branch").value).to have_content "new_design"
-    expect(find("#merge_request_target_branch").value).to have_content "master"
-    expect(find("#merge_request_title").value).to eq "New Design"
-    verify_commit_link(".mr_target_commit", @project)
-    verify_commit_link(".mr_source_commit", @forked_project)
-  end
  step 'I update the merge request title' do
    fill_in "merge_request_title", with: "An Edited Forked Merge Request"
  end
@@ -155,10 +132,4 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
      expect(page).to have_content @project.users.first.name
    end
  end
-  # Verify a link is generated against the correct project
-  def verify_commit_link(container_div, container_project)
-    # This should force a wait for the javascript to execute
-    expect(find(:div, container_div).find(".commit_short_id")['href']).to have_content "#{container_project.path_with_namespace}/commit"
-  end
 end
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -61,16 +61,16 @@ describe('Commit component', () => {
    });
    it('should render a link to the ref url', () => {
-      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commitRef.ref_url);
+      expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual(props.commitRef.ref_url);
    });
    it('should render the ref name', () => {
-      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commitRef.name);
+      expect(component.$el.querySelector('.ref-name').textContent).toContain(props.commitRef.name);
    });
    it('should render the commit short sha with a link to the commit url', () => {
-      expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commitUrl);
+      expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual(props.commitUrl);
-      expect(component.$el.querySelector('.commit-id').textContent).toContain(props.shortSha);
+      expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
    });
    it('should render the given commitIconSvg', () => {

--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -89,7 +89,7 @@ describe('Pipelines Table Row', () => {
    it('should render link to commit', () => {
      component = buildComponent(pipeline);
-      const commitLink = component.$el.querySelector('.branch-commit .commit-id');
+      const commitLink = component.$el.querySelector('.branch-commit .commit-sha');
      expect(commitLink.getAttribute('href')).toEqual(pipeline.commit.commit_path);
    });

--- a/spec/models/project_services/chat_message/pipeline_message_spec.rb
+++ b/spec/models/project_services/chat_message/pipeline_message_spec.rb
@@ -62,7 +62,7 @@ describe ChatMessage::PipelineMessage do
    def build_message(status_text = status, name = user[:name])
      "<http://example.gitlab.com|project_name>:" \
        " Pipeline <http://example.gitlab.com/pipelines/123|#123>" \
-        " of <http://example.gitlab.com/commits/develop|develop> branch" \
+        " of branch `<http://example.gitlab.com/commits/develop|develop>`" \
        " by #{name} #{status_text} in 02:00:10"
    end
  end
@@ -81,7 +81,7 @@ describe ChatMessage::PipelineMessage do
        expect(subject.pretext).to be_empty
        expect(subject.attachments).to eq(message)
        expect(subject.activity).to eq({
-          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by hacker passed',
+          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by hacker passed',
          subtitle: 'in [project_name](http://example.gitlab.com)',
          text: 'in 02:00:10',
          image: ''
@@ -98,7 +98,7 @@ describe ChatMessage::PipelineMessage do
        expect(subject.pretext).to be_empty
        expect(subject.attachments).to eq(message)
        expect(subject.activity).to eq({
-          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by hacker failed',
+          title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by hacker failed',
          subtitle: 'in [project_name](http://example.gitlab.com)',
          text: 'in 02:00:10',
          image: ''
@@ -113,7 +113,7 @@ describe ChatMessage::PipelineMessage do
          expect(subject.pretext).to be_empty
          expect(subject.attachments).to eq(message)
          expect(subject.activity).to eq({
-            title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of [develop](http://example.gitlab.com/commits/develop) branch by API failed',
+            title: 'Pipeline [#123](http://example.gitlab.com/pipelines/123) of branch `[develop](http://example.gitlab.com/commits/develop)` by API failed',
            subtitle: 'in [project_name](http://example.gitlab.com)',
            text: 'in 02:00:10',
            image: ''
@@ -125,8 +125,8 @@ describe ChatMessage::PipelineMessage do
    def build_markdown_message(status_text = status, name = user[:name])
      "[project_name](http://example.gitlab.com):" \
        " Pipeline [#123](http://example.gitlab.com/pipelines/123)" \
-        " of [develop](http://example.gitlab.com/commits/develop)" \
+        " of branch `[develop](http://example.gitlab.com/commits/develop)`" \
-        " branch by #{name} #{status_text} in 02:00:10"
+        " by #{name} #{status_text} in 02:00:10"
    end
  end
 end
--- a/spec/models/project_services/chat_message/push_message_spec.rb
+++ b/spec/models/project_services/chat_message/push_message_spec.rb
@@ -28,7 +28,7 @@ describe ChatMessage::PushMessage, models: true do
    context 'without markdown' do
      it 'returns a message regarding pushes' do
        expect(subject.pretext).to eq(
-          'test.user pushed to branch <http://url.com/commits/master|master> of '\
+          'test.user pushed to branch `<http://url.com/commits/master|master>` of '\
            '<http://url.com|project_name> (<http://url.com/compare/before...after|Compare changes>)')
        expect(subject.attachments).to eq([{
          text: "<http://url1.com|abcdefgh>: message1 - author1\n\n"\
@@ -45,7 +45,7 @@ describe ChatMessage::PushMessage, models: true do
      it 'returns a message regarding pushes' do
        expect(subject.pretext).to eq(
-          'test.user pushed to branch [master](http://url.com/commits/master) of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
+          'test.user pushed to branch `[master](http://url.com/commits/master)` of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
        expect(subject.attachments).to eq(
          "[abcdefgh](http://url1.com): message1 - author1\n\n[12345678](http://url2.com): message2 - author2")
        expect(subject.activity).to eq({
@@ -74,7 +74,7 @@ describe ChatMessage::PushMessage, models: true do
    context 'without markdown' do
      it 'returns a message regarding pushes' do
        expect(subject.pretext).to eq('test.user pushed new tag ' \
-          '<http://url.com/commits/new_tag|new_tag> to ' \
+          '`<http://url.com/commits/new_tag|new_tag>` to ' \
          '<http://url.com|project_name>')
        expect(subject.attachments).to be_empty
      end
@@ -87,7 +87,7 @@ describe ChatMessage::PushMessage, models: true do
      it 'returns a message regarding pushes' do
        expect(subject.pretext).to eq(
-          'test.user pushed new tag [new_tag](http://url.com/commits/new_tag) to [project_name](http://url.com)')
+          'test.user pushed new tag `[new_tag](http://url.com/commits/new_tag)` to [project_name](http://url.com)')
        expect(subject.attachments).to be_empty
        expect(subject.activity).to eq({
          title: 'test.user created tag',
@@ -107,7 +107,7 @@ describe ChatMessage::PushMessage, models: true do
    context 'without markdown' do
      it 'returns a message regarding a new branch' do
        expect(subject.pretext).to eq(
-          'test.user pushed new branch <http://url.com/commits/master|master> to '\
+          'test.user pushed new branch `<http://url.com/commits/master|master>` to '\
            '<http://url.com|project_name>')
        expect(subject.attachments).to be_empty
      end
@@ -120,7 +120,7 @@ describe ChatMessage::PushMessage, models: true do
      it 'returns a message regarding a new branch' do
        expect(subject.pretext).to eq(
-          'test.user pushed new branch [master](http://url.com/commits/master) to [project_name](http://url.com)')
+          'test.user pushed new branch `[master](http://url.com/commits/master)` to [project_name](http://url.com)')
        expect(subject.attachments).to be_empty
        expect(subject.activity).to eq({
          title: 'test.user created branch',
@@ -140,7 +140,7 @@ describe ChatMessage::PushMessage, models: true do
    context 'without markdown' do
      it 'returns a message regarding a removed branch' do
        expect(subject.pretext).to eq(
-          'test.user removed branch master from <http://url.com|project_name>')
+          'test.user removed branch `master` from <http://url.com|project_name>')
        expect(subject.attachments).to be_empty
      end
    end
@@ -152,7 +152,7 @@ describe ChatMessage::PushMessage, models: true do
      it 'returns a message regarding a removed branch' do
        expect(subject.pretext).to eq(
-          'test.user removed branch master from [project_name](http://url.com)')
+          'test.user removed branch `master` from [project_name](http://url.com)')
        expect(subject.attachments).to be_empty
        expect(subject.activity).to eq({
          title: 'test.user removed branch',