Improve & fix the performance bar UI and behavior

13 files changed, 215 insertions, 28 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index e924fde60bf..ffd8d494a40 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -57,6 +57,7 @@ import ShortcutsBlob from './shortcuts_blob';
 import initSettingsPanels from './settings_panels';
 import initExperimentalFlags from './experimental_flags';
 import OAuthRememberMe from './oauth_remember_me';
+import PerformanceBar from './performance_bar';
 
 (function() {
   var Dispatcher;
@@ -515,6 +516,10 @@ import OAuthRememberMe from './oauth_remember_me';
       if (!shortcut_handler) {
         new Shortcuts();
       }
+
+      if (document.querySelector('#peek')) {
+        new PerformanceBar({ container: '#peek' });
+      }
     };
 
     Dispatcher.prototype.initSearch = function() {
diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js
deleted file mode 100644
index de1a99fa3bd..00000000000
--- a/app/assets/javascripts/peek.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'vendor/peek';
-import 'vendor/peek.performance_bar';
-
-$(document).on('click', '#peek-show-queries', (e) => {
-  e.preventDefault();
-  $('.peek-rblineprof-modal').hide();
-  const $modal = $('#modal-peek-pg-queries');
-  if ($modal.length) {
-    $modal.modal('toggle');
-  }
-});
-
-$(document).on('click', '.js-lineprof-file', (e) => {
-  e.preventDefault();
-  $(e.target).parents('.peek-rblineprof-file').find('.data').toggle();
-});
diff --git a/app/assets/javascripts/performance_bar.js b/app/assets/javascripts/performance_bar.js
new file mode 100644
index 00000000000..9bbdf7f513c
--- /dev/null
+++ b/app/assets/javascripts/performance_bar.js
@@ -0,0 +1,62 @@
+import 'vendor/peek';
+import 'vendor/peek.performance_bar';
+
+export default class PerformanceBar {
+  constructor(opts) {
+    if (!PerformanceBar.singleton) {
+      this.init(opts);
+      PerformanceBar.singleton = this;
+    }
+    return PerformanceBar.singleton;
+  }
+
+  init(opts) {
+    const $container = $(opts.container);
+    this.$sqlProfileLink = $container.find('.js-toggle-modal-peek-sql');
+    this.$sqlProfileModal = $container.find('#modal-peek-pg-queries');
+    this.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile');
+    this.$lineProfileModal = $('#modal-peek-line-profile');
+    this.initEventListeners();
+    this.showModalOnLoad();
+  }
+
+  initEventListeners() {
+    this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
+    this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
+    $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
+  }
+
+  showModalOnLoad() {
+    // When a lineprofiler query-string param is present, we show the line
+    // profiler modal upon page load
+    if (/lineprofiler/.test(window.location.search)) {
+      PerformanceBar.toggleModal(this.$lineProfileModal);
+    }
+  }
+
+  handleSQLProfileLink() {
+    PerformanceBar.toggleModal(this.$sqlProfileModal);
+  }
+
+  handleLineProfileLink(e) {
+    const lineProfilerParameter = gl.utils.getParameterValues('lineprofiler');
+    const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);
+    const shouldToggleModal = lineProfilerParameter.length > 0 &&
+      lineProfilerParameterRegex.test(e.currentTarget.href);
+
+    if (shouldToggleModal) {
+      e.preventDefault();
+      PerformanceBar.toggleModal(this.$lineProfileModal);
+    }
+  }
+
+  static toggleModal($modal) {
+    if ($modal.length) {
+      $modal.modal('toggle');
+    }
+  }
+
+  static toggleLineProfileFile(e) {
+    $(e.currentTarget).parents('.peek-rblineprof-file').find('.data').toggle();
+  }
+}
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 7098203321d..a28f54936be 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -21,3 +21,9 @@ body.modal-open {
     width: 860px;
   }
 }
+
+@media (min-width: $screen-lg-min) {
+  .modal-full {
+    width: 98%;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index da4d91511e0..2e4b1280a97 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -594,3 +594,15 @@ Convdev Index
 $color-high-score: $green-400;
 $color-average-score: $orange-400;
 $color-low-score: $red-400;
+
+/*
+Performance Bar
+*/
+$perf-bar-text: #999;
+$perf-bar-production: #222;
+$perf-bar-staging: #291430;
+$perf-bar-development: #4c1210;
+$perf-bar-bucket-bg: #111;
+$perf-bar-bucket-color: #ccc;
+$perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
+$perf-bar-bucket-box-shadow-to: rgba($black, .25);
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
new file mode 100644
index 00000000000..2890b6b1e49
--- /dev/null
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -0,0 +1,103 @@
+@import "framework/variables";
+@import "peek/views/performance_bar";
+@import "peek/views/rblineprof";
+
+#peek {
+  height: 35px;
+  background: $black;
+  line-height: 35px;
+  color: $perf-bar-text;
+
+  &.disabled {
+    display: none;
+  }
+
+  &.production {
+    background-color: $perf-bar-production;
+  }
+
+  &.staging {
+    background-color: $perf-bar-staging;
+  }
+
+  &.development {
+    background-color: $perf-bar-development;
+  }
+
+  .wrapper {
+    width: 1000px;
+    margin: 0 auto;
+  }
+
+  // UI Elements
+  .bucket {
+    background: $perf-bar-bucket-bg;
+    display: inline-block;
+    padding: 4px 6px;
+    font-family: Consolas, "Liberation Mono", Courier, monospace;
+    line-height: 1;
+    color: $perf-bar-bucket-color;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
+
+    .hidden {
+      display: none;
+    }
+
+    &:hover .hidden {
+      display: inline;
+    }
+  }
+
+  strong {
+    color: $white-light;
+  }
+
+  table {
+    color: $black;
+
+    strong {
+      color: $black;
+    }
+  }
+
+  .view {
+    margin-right: 15px;
+    float: left;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .css-truncate {
+    &.css-truncate-target,
+    .css-truncate-target {
+      display: inline-block;
+      max-width: 125px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: top;
+    }
+
+    &.expandable:hover .css-truncate-target,
+    &.expandable:hover.css-truncate-target {
+      max-width: 10000px !important;
+    }
+  }
+}
+
+#modal-peek-pg-queries-content {
+  color: $black;
+}
+
+.peek-rblineprof-file {
+  pre.duration {
+    width: 280px;
+  }
+
+  .data {
+    overflow: visible;
+  }
+}
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index e589ed4e56d..b769462abc2 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -23,7 +23,6 @@ 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
diff --git a/app/helpers/performance_bar_helper.rb b/app/helpers/performance_bar_helper.rb
new file mode 100644
index 00000000000..d24efe37f5f
--- /dev/null
+++ b/app/helpers/performance_bar_helper.rb
@@ -0,0 +1,7 @@
+module PerformanceBarHelper
+  # This is a hack since using `alias_method :performance_bar_enabled?, :peek_enabled?`
+  # in WithPerformanceBar breaks tests (but works in the browser).
+  def performance_bar_enabled?
+    peek_enabled?
+  end
+end
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 331d1181220..56e628a2b74 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -27,10 +27,11 @@
                   %td.shortcut
                     .key f
                   %td Focus Filter
-                %tr
-                  %td.shortcut
-                    .key p b
-                  %td Show/hide the Performance Bar
+                - if performance_bar_enabled?
+                  %tr
+                    %td.shortcut
+                      .key p b
+                    %td Show/hide the Performance Bar
                 %tr
                   %td.shortcut
                     .key ?
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index abb6dc2e9f3..6ad22958df3 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -30,7 +30,7 @@
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
   = stylesheet_link_tag "test",        media: "all" if Rails.env.test?
-  = stylesheet_link_tag 'peek' if peek_enabled?
+  = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
 
   - if show_new_nav?
     = stylesheet_link_tag "new_nav", media: "all"
@@ -44,7 +44,7 @@
   = webpack_bundle_tag "main"
   = webpack_bundle_tag "raven" if current_application_settings.clientside_sentry_enabled
   = webpack_bundle_tag "test" if Rails.env.test?
-  = webpack_bundle_tag 'peek' if peek_enabled?
+  = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index d879df8fc82..81f83b74826 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -3,7 +3,6 @@
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
     = render "layouts/init_auto_complete" if @gfm_form
-    = render 'peek/bar'
     - if show_new_nav?
       = render "layouts/header/new"
     - else
@@ -11,3 +10,5 @@
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body
+
+    = render 'peek/bar'
diff --git a/app/views/peek/views/_rblineprof.html.haml b/app/views/peek/views/_rblineprof.html.haml
new file mode 100644
index 00000000000..6c037930ca9
--- /dev/null
+++ b/app/views/peek/views/_rblineprof.html.haml
@@ -0,0 +1,7 @@
+Profile:
+
+= link_to 'all', url_for(lineprofiler: 'true'), class: 'js-toggle-modal-peek-line-profile'
+\/
+= link_to 'app & lib', url_for(lineprofiler: 'app'), class: 'js-toggle-modal-peek-line-profile'
+\/
+= link_to 'views', url_for(lineprofiler: 'views'), class: 'js-toggle-modal-peek-line-profile'
diff --git a/app/views/peek/views/_sql.html.haml b/app/views/peek/views/_sql.html.haml
index 16fc010f66f..dd8b524064f 100644
--- a/app/views/peek/views/_sql.html.haml
+++ b/app/views/peek/views/_sql.html.haml
@@ -1,13 +1,13 @@
 %strong
-  %a#peek-show-queries{ href: '#' }
+  %a.js-toggle-modal-peek-sql
     %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-dialog.modal-full
+    .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
         %h4
           SQL queries
       .modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }...