Improve UI of the performance bar

Signed-off-by: Rémy Coutable <remy@rymai.me>

app/helpers/nav_helper.rb

@@ -27,6 +27,7 @@ module NavHelper
   def nav_header_class
     class_name = ''
     class_name << " with-horizontal-nav" if defined?(nav) && nav
+    class_name << " with-peek" if peek_enabled?
 
     class_name
   end

app/views/peek/views/_pg.html.haml

 %strong
   %a#peek-show-queries{ href: '#' }
     %span{ data: { defer_to: "#{view.defer_key}-duration" }}...
-    /
+    \/
     %span{ data: { defer_to: "#{view.defer_key}-calls" }}...
-    /
-  #modal-peek-pg-queries.modal{ tabindex: -1 }
-    .modal-dialog
-      #modal-peek-pg-queries-content.modal-content
-        .modal-header
-          %a.close{ href: "#", "data-dismiss" => "modal" } ×
-          %h4
-            SQL queries
-        .modal-body{ data: { defer_to: "#{view.defer_key}-queries" }}...
+#modal-peek-pg-queries.modal{ tabindex: -1 }
+  .modal-dialog
+    #modal-peek-pg-queries-content.modal-content
+      .modal-header
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h4
+          SQL queries
+      .modal-body{ data: { defer_to: "#{view.defer_key}-queries" }}...
 pg

vendor/assets/stylesheets/peek.scss

 //= require peek/views/performance_bar
 //= require peek/views/rblineprof
 
+header.navbar-gitlab.with-peek {
+  top: 35px;
+}
+
 #peek {
   background: #000;
   height: 35px;
@@ -57,6 +61,12 @@
     color: #fff;
   }
 
+  table {
+    strong {
+      color: #000;
+    }
+  }
+
   .view {
     margin-right: 15px;
     float: left;