Display jobs as scrolling list in sidebar

app/assets/javascripts/build.js

@@ -20,7 +20,6 @@
 
       this.populateJobs(build_stage);
       this.updateStageDropdownText(build_stage);
-      this.updateJobDropdownText(build_name);
       this.hideSidebar();
 
       $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
@@ -146,11 +145,6 @@
 
     Build.prototype.updateStageDropdownText = function(stage) {
       $('.stage-selection').text(stage);
-      this.updateJobDropdownText('-');
-    };
-
-    Build.prototype.updateJobDropdownText = function(name) {
-      $('.build-selection').text(name);
     };
 
     Build.prototype.updateDropdown = function(e) {

app/assets/stylesheets/pages/builds.scss

@@ -53,22 +53,6 @@
       left: 70px;
     }
   }
-
-  .build-dropdown {
-    display: inline-block;
-    margin-top: 16px;
-
-    svg {
-      position: relative;
-      top: 2px;
-      margin-right: 3px;
-      height: 13px;
-    }
-
-    .stage-item {
-      cursor: pointer;
-    }
-  }
 }
 
 .build-header {
@@ -116,24 +100,70 @@
 }
 
 .right-sidebar.build-sidebar {
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
+  padding: $gl-padding 0;
+  border-left: 1px solid $border-color;
 
   &.right-sidebar-collapsed {
     display: none;
   }
 
+  .blocks-container {
+    padding: $gl-padding;
+  }
+
   .block {
     width: 100%;
   }
 
   .build-sidebar-header {
-    padding-top: 0;
+    padding: 0 $gl-padding $gl-padding;
 
     .gutter-toggle {
       margin-top: 0;
     }
   }
+
+  .stage-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $gl-text-color;
+    }
+  }
+
+  .build-dropdown {
+    padding: 0 $gl-padding;
+  }
+
+  .builds-container {
+    margin: $gl-padding 0;
+    background-color: $white-light;
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 3px;
+      height: 13px;
+    }
+
+    a {
+      display: block;
+      padding: $gl-padding 10px;
+
+      &:hover {
+        background-color: $row-hover;
+        color: $gl-text-color;
+      }
+    }
+
+    .build-job {
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 .build-detail-row {

app/views/projects/builds/_sidebar.html.haml

@@ -23,14 +23,10 @@
           %li
             %a.stage-item= stage
 
-    .dropdown.build-dropdown
-      %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.build-selection More
-        = icon('caret-down')
-      %ul.dropdown-menu
+    .builds-container
       - statuses.each do |build_status|
         - builds.select{|build| build.status == build_status}.each do |build|
-            %li.build-job{class: ('active' if build == @build), data: {stage: build.stage}}
+          .build-job{class: ('active' if build == @build), data: {stage: build.stage}}
             = link_to namespace_project_build_path(@project.namespace, @project, build) do
               = ci_icon_for_status(build.status)
               %span
@@ -47,6 +43,7 @@
               %i.fa.fa-warning
               This build was retried.
 
+  .blocks-container
     - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
       .block{ class: ("block-first" if !@build.coverage) }
         .title