Add blame view age map

5 files changed, 95 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index d08df05fd6c..b26d8fbd5fe 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -59,6 +59,43 @@
     }
   }
 
+  .file-blame-legend {
+    background-color: $gray-light;
+    text-align: right;
+    padding: 8px $gl-padding;
+
+    @media (max-width: $screen-xs-max) {
+      text-align: left;
+    }
+
+    .left-label {
+      padding-right: 5px;
+    }
+
+    .right-label {
+      padding-left: 5px;
+    }
+
+    .legend-box {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      padding: 0 2px;
+    }
+
+    @for $i from 0 through 5 {
+      .legend-box-#{$i} {
+        background-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
+      }
+    }
+
+    @for $i from 1 through 4 {
+      .legend-box-#{$i + 5} {
+        background-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
+      }
+    }
+  }
+
   .file-content {
     background: $white-light;
 
@@ -118,6 +155,19 @@
         padding: 5px 10px;
         min-width: 400px;
         background: $gray-light;
+        border-left: 3px solid;
+      }
+
+      @for $i from 0 through 5 {
+        td.blame-commit-age-#{$i} {
+          border-left-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
+        }
+      }
+
+      @for $i from 1 through 4 {
+        td.blame-commit-age-#{$i + 5} {
+          border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
+        }
       }
 
       td.line-numbers {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4114a050d9a..49ba0108228 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -365,6 +365,13 @@ $avatar-border: rgba(0, 0, 0, .1);
 $gl-avatar-size: 40px;
 
 /*
+* Blame
+*/
+$blame-gray: #ededed;
+$blame-cyan: #acd5f2;
+$blame-blue: #254e77;
+
+/*
 * Builds
 */
 $builds-trace-bg: #111;
diff --git a/app/helpers/blame_helper.rb b/app/helpers/blame_helper.rb
new file mode 100644
index 00000000000..d1dc4d94560
--- /dev/null
+++ b/app/helpers/blame_helper.rb
@@ -0,0 +1,21 @@
+module BlameHelper
+  def age_map_duration(blame_groups, project)
+    now = Time.zone.now
+    start_date = blame_groups.map { |blame_group| blame_group[:commit].committed_date }
+      .append(project.created_at).min
+
+    {
+      now: now,
+      started_days_ago: (now - start_date).to_i / 1.day
+    }
+  end
+
+  def age_map_class(commit_date, duration)
+    commit_date_days_ago = (duration[:now] - commit_date).to_i / 1.day
+    # Numbers 0 to 10 come from this calculation, but only commits on the oldest
+    # day get number 10 (all other numbers can be multiple days), so the range
+    # is normalized to 0-9
+    age_group = [(10 * commit_date_days_ago) / duration[:started_days_ago], 9].min
+    "blame-commit-age-#{age_group}"
+  end
+end
diff --git a/app/views/projects/blame/_age_map_legend.html.haml b/app/views/projects/blame/_age_map_legend.html.haml
new file mode 100644
index 00000000000..533dc20ffb3
--- /dev/null
+++ b/app/views/projects/blame/_age_map_legend.html.haml
@@ -0,0 +1,12 @@
+%span.left-label Newer
+%span.legend-box.legend-box-0
+%span.legend-box.legend-box-1
+%span.legend-box.legend-box-2
+%span.legend-box.legend-box-3
+%span.legend-box.legend-box-4
+%span.legend-box.legend-box-5
+%span.legend-box.legend-box-6
+%span.legend-box.legend-box-7
+%span.legend-box.legend-box-8
+%span.legend-box.legend-box-9
+%span.right-label Older
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index a6ee2b2f7b8..ce937ee1842 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -1,4 +1,5 @@
 - @no_container = true
+- project_duration = age_map_duration(@blame_groups, @project)
 - page_title "Annotate", @blob.path, @ref
 = render "projects/commits/head"
 
@@ -8,15 +9,16 @@
 
     .file-holder
       = render "projects/blob/header", blob: @blob, blame: true
-
+      .file-blame-legend
+        = render 'age_map_legend'
       .table-responsive.file-content.blame.code.js-syntax-highlight
         %table
           - current_line = 1
           - @blame_groups.each do |blame_group|
             %tr
-              %td.blame-commit
+              - commit = blame_group[:commit]
+              %td.blame-commit{ class: age_map_class(commit.committed_date, project_duration) }
                 .commit
-                  - commit = blame_group[:commit]
                   = author_avatar(commit, size: 36)
                   .commit-row-title
                     %strong