Moves the Performance Bar to the top instead of being at the bottom

16 files changed, 111 insertions, 24 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 605f4284bb5..df847094864 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -315,6 +315,10 @@ header {
   }
 }
 
+.with-performance-bar header.navbar-gitlab {
+  top: $performance-bar-height;
+}
+
 .navbar-nav {
   li {
     .badge {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 4a9d41b4fda..67c3287ed74 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -120,3 +120,7 @@ of the body element here, we negate cascading side effects but allow momentum sc
 .page-with-sidebar {
   -webkit-overflow-scrolling: auto;
 }
+
+.with-performance-bar .page-with-sidebar {
+  margin-top: $header-height + $performance-bar-height;
+}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 35b4d77a5ab..88e7ba117d5 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -347,6 +347,10 @@
   }
 }
 
+.with-performance-bar .layout-nav {
+  margin-top: $header-height + $performance-bar-height;
+}
+
 .scrolling-tabs-container {
   position: relative;
 
@@ -441,6 +445,22 @@
   }
 }
 
+.with-performance-bar .page-with-layout-nav {
+  .right-sidebar {
+    top: ($header-height + 1) * 2 + $performance-bar-height;
+  }
+
+  &.page-with-sub-nav {
+    .right-sidebar {
+      top: ($header-height + 1) * 3 + $performance-bar-height;
+
+      &.affix {
+        top: $header-height + $performance-bar-height;
+      }
+    }
+  }
+}
+
 .nav-block {
   &.activities {
     border-bottom: 1px solid $border-color;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 49b2f0e43a4..09b60ad1676 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -89,6 +89,10 @@
   }
 }
 
+.with-performance-bar .right-sidebar.affix {
+  top: $header-height + $performance-bar-height;
+}
+
 @mixin maintain-sidebar-dimensions {
   display: block;
   width: $gutter-width;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index cf0a1ad57d0..0df6f24bfe6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -204,6 +204,7 @@ $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
+$performance-bar-height: 35px;
 
 
 /*
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index ae43197a1a6..54f3e8d882c 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -118,7 +118,7 @@ $new-sidebar-width: 220px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: 50px;
+  top: $header-height;
   bottom: 0;
   left: 0;
   overflow: auto;
@@ -163,6 +163,10 @@ $new-sidebar-width: 220px;
   }
 }
 
+.with-performance-bar .nav-sidebar {
+  top: $header-height + $performance-bar-height;
+}
+
 .sidebar-sub-level-items {
   display: none;
   padding-bottom: 8px;
@@ -260,7 +264,7 @@ $new-sidebar-width: 220px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - 50px);
+  height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -270,6 +274,10 @@ $new-sidebar-width: 220px;
   }
 }
 
+.with-performance-bar .boards-list {
+  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
+}
+
 
 // Change color of all horizontal tabs to match the new indigo color
 .nav-links li.active a {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index b6fc628c02b..7f14c149198 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,10 +64,10 @@
     color: $gl-text-color;
     position: sticky;
     position: -webkit-sticky;
-    top: 50px;
+    top: $header-height;
 
     &.affix {
-      top: 50px;
+      top: $header-height;
     }
 
     // with sidebar
@@ -171,6 +171,16 @@
   }
 }
 
+.with-performance-bar .build-page {
+  .top-bar {
+    top: $header-height + $performance-bar-height;
+
+    &.affix {
+      top: $header-height + $performance-bar-height;
+    }
+  }
+}
+
 .build-header {
   .ci-header-container,
   .header-action-buttons {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index eb269df46fe..6da14320914 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -445,6 +445,14 @@
   }
 }
 
+.with-performance-bar .right-sidebar {
+  top: $header-height + $performance-bar-height;
+
+  .issuable-sidebar {
+    height: calc(100% - #{$header-height} - #{$performance-bar-height});
+  }
+}
+
 .detail-page-description {
   padding: 16px 0;
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 2db967547dd..4693b2434c7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -759,6 +759,10 @@
   }
 }
 
+.with-performance-bar .merge-request-tabs-holder {
+  top: $header-height + $performance-bar-height;
+}
+
 .merge-request-tabs {
   display: flex;
   margin-bottom: 0;
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 2890b6b1e49..6e539e39ca1 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -3,9 +3,16 @@
 @import "peek/views/rblineprof";
 
 #peek {
-  height: 35px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 2000;
+  overflow-x: hidden;
+
+  height: $performance-bar-height;
   background: $black;
-  line-height: 35px;
+  line-height: $performance-bar-height;
   color: $perf-bar-text;
 
   &.disabled {
@@ -25,7 +32,8 @@
   }
 
   .wrapper {
-    width: 1000px;
+    width: 80%;
+    height: $performance-bar-height;
     margin: 0 auto;
   }
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1c165700b19..14dc9bd9d62 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -264,7 +264,11 @@ module ApplicationHelper
   end
 
   def page_class
-    "issue-boards-page" if current_controller?(:boards)
+    class_names = []
+    class_names << 'issue-boards-page' if current_controller?(:boards)
+    class_names << 'with-performance-bar' if performance_bar_enabled?
+
+    class_names
   end
 
   # Returns active css class when condition returns true
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index b769462abc2..b1205b8529b 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -1,38 +1,49 @@
 module NavHelper
+  def page_with_sidebar_class
+    class_name = page_gutter_class
+    class_name << 'page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar
+
+    class_name
+  end
+
   def page_gutter_class
     if current_path?('merge_requests#show') ||
         current_path?('projects/merge_requests/conflicts#show') ||
         current_path?('issues#show') ||
         current_path?('milestones#show')
       if cookies[:collapsed_gutter] == 'true'
-        "page-gutter right-sidebar-collapsed"
+        %w[page-gutter right-sidebar-collapsed]
       else
-        "page-gutter right-sidebar-expanded"
+        %w[page-gutter right-sidebar-expanded]
       end
     elsif current_path?('jobs#show')
-      "page-gutter build-sidebar right-sidebar-expanded"
+      %w[page-gutter build-sidebar right-sidebar-expanded]
     elsif current_path?('wikis#show') ||
         current_path?('wikis#edit') ||
         current_path?('wikis#update') ||
         current_path?('wikis#history') ||
         current_path?('wikis#git_access')
-      "page-gutter wiki-sidebar right-sidebar-expanded"
+      %w[page-gutter wiki-sidebar right-sidebar-expanded]
+    else
+      []
     end
   end
 
   def nav_header_class
-    class_name = ''
-    class_name << " with-horizontal-nav" if defined?(nav) && nav
+    class_names = []
+    class_names << 'with-horizontal-nav' if defined?(nav) && nav
 
-    class_name
+    class_names
   end
 
   def layout_nav_class
-    class_name = ''
-    class_name << " page-with-layout-nav" if defined?(nav) && nav
-    class_name << " page-with-sub-nav" if content_for?(:sub_nav)
+    return [] if show_new_nav?
 
-    class_name
+    class_names = []
+    class_names << 'page-with-layout-nav' if defined?(nav) && nav
+    class_names << 'page-with-sub-nav' if content_for?(:sub_nav)
+
+    class_names
   end
 
   def nav_control_class
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 873220cc73d..c4f8cd71395 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,4 +1,4 @@
-.page-with-sidebar{ class: "#{('page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar)} #{page_gutter_class}" }
+.page-with-sidebar{ class: page_with_sidebar_class }
   - if show_new_nav?
     - if defined?(nav) && nav
       = render "layouts/nav/#{nav}"
@@ -9,7 +9,7 @@
           = render "layouts/nav/#{nav}"
     - if content_for?(:sub_nav)
       = yield :sub_nav
-  .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
+  .content-wrapper{ class: layout_nav_class }
     - if show_new_nav?
       .mobile-overlay
     .alert-wrapper
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 38b95d11fd4..b53f382fa3d 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,8 +1,9 @@
 !!! 5
-%html{ lang: I18n.locale, class: "#{page_class}" }
+%html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } }
     = render "layouts/init_auto_complete" if @gfm_form
+    = render 'peek/bar'
     - if show_new_nav?
       = render "layouts/header/new"
     - else
@@ -10,5 +11,3 @@
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body
-
-    = render 'peek/bar'
diff --git a/app/views/peek/views/_host.html.haml b/app/views/peek/views/_host.html.haml
new file mode 100644
index 00000000000..40769b5c6f6
--- /dev/null
+++ b/app/views/peek/views/_host.html.haml
@@ -0,0 +1,2 @@
+%span.current-host
+  = truncate(view.hostname)
diff --git a/doc/administration/monitoring/performance/img/performance_bar.png b/doc/administration/monitoring/performance/img/performance_bar.png
index d38293d2ed6..b3c6bc474e3 100644
--- a/doc/administration/monitoring/performance/img/performance_bar.png
+++ b/doc/administration/monitoring/performance/img/performance_bar.png