Merge branch '34870-move-performance-bar-to-top' into 'master'

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

Closes #35019 and #34870

See merge request !12946

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 {

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;
+}

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;

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;

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;
 
 
 /*

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 {

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 {

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;
 

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;

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;
   }
 

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

app/helpers/nav_helper.rb

 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

app/views/layouts/_page.html.haml

-.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

app/views/layouts/application.html.haml

 !!! 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'

app/views/peek/views/_host.html.haml

+%span.current-host
+  = truncate(view.hostname)