New performance bar that can be enabled with the `p b` shortcut

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

6 files changed, 39 insertions, 1 deletions

diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js
new file mode 100644
index 00000000000..4ba23ea1a09
--- /dev/null
+++ b/app/assets/javascripts/peek.js
@@ -0,0 +1,4 @@
+import 'vendor/jquery.tipsy';
+import 'vendor/peek';
+import 'vendor/peek.performance_bar';
+import 'vendor/peek.rblineprof';
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 8ac71797c14..2c7698eb174 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,6 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-else-return, comma-dangle, max-len */
 /* global Mousetrap */
 /* global findFileURL */
+import Cookies from 'js-cookie';
+
 import findAndFollowLink from './shortcuts_dashboard_navigation';
 
 (function() {
@@ -14,6 +16,7 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       Mousetrap.bind('?', this.onToggleHelp);
       Mousetrap.bind('s', Shortcuts.focusSearch);
       Mousetrap.bind('f', (e => this.focusFilter(e)));
+      Mousetrap.bind('p b', this.onTogglePerfBar);
 
       const $globalDropdownMenu = $('.global-dropdown-menu');
       const $globalDropdownToggle = $('.global-dropdown-toggle');
@@ -53,6 +56,17 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       return Shortcuts.toggleHelp(this.enabledHelp);
     };
 
+    Shortcuts.prototype.onTogglePerfBar = function(e) {
+      e.preventDefault();
+      if (Cookies.get('perf_bar_enabled') === 'true') {
+        Cookies.remove('perf_bar_enabled', { path: '/' });
+      }
+      else {
+        Cookies.set('perf_bar_enabled', true, { path: '/' });
+      }
+      return gl.utils.refreshCurrentPage();
+    };
+
     Shortcuts.prototype.toggleMarkdownPreview = function(e) {
       // Check if short-cut was triggered while in Write Mode
       const $target = $(e.target);
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 47ce21d238b..01b1462d5ec 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -18,7 +18,7 @@ class ApplicationController < ActionController::Base
   before_action :ldap_security_check
   before_action :sentry_context
   before_action :default_headers
-  before_action :add_gon_variables
+  before_action :add_gon_variables, unless: -> { request.path.start_with?('/peek') }
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :require_email, unless: :devise_controller?
 
@@ -63,6 +63,19 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  def peek_enabled?
+    return false unless Gitlab::PerformanceBar.enabled?
+    return false unless current_user
+
+    if RequestStore.active?
+      if RequestStore.store.key?(:peek_enabled)
+        RequestStore.store[:peek_enabled]
+      else
+        RequestStore.store[:peek_enabled] = cookies[:perf_bar_enabled].present?
+      end
+    end
+  end
+
   protected
 
   # This filter handles both private tokens and personal access tokens
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index ea8bbe92d86..42017228908 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -29,6 +29,10 @@
                   %td Focus Filter
                 %tr
                   %td.shortcut
+                    .key p b
+                  %td Enable the Performance Bar
+                %tr
+                  %td.shortcut
                     .key ?
                   %td Show/hide this dialog
                 %tr
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 1ef0d524dbb..eea33b5966f 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -28,6 +28,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?
 
   = Gon::Base.render_data
 
@@ -37,6 +38,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?
 
   - 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 03688e9ff21..2b07273a0a8 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -3,6 +3,7 @@
   = 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'
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav