Merge request performance improvementsdiff-perf

10 files changed, 27 insertions, 43 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index f7f6a773036..7acc3eff9f2 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -75,7 +75,7 @@ import './flash';
 
       this.bindEvents();
       this.activateTab(action);
-      this.initAffix();
+      // this.initAffix();
     }
 
     bindEvents() {
@@ -347,13 +347,12 @@ import './flash';
       if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
 
       const $diffTabs = $('#diff-notes-app');
+      const top = $diffTabs.offset().top - $tabs.height();
 
       $tabs.off('affix.bs.affix affix-top.bs.affix')
         .affix({
           offset: {
-            top: () => (
-              $diffTabs.offset().top - $tabs.height()
-            ),
+            top,
           },
         })
         .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index a9b3de281e1..f287f6df384 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -8,7 +8,13 @@ import Cookies from 'js-cookie';
   this.Sidebar = (function() {
     function Sidebar(currentUser) {
       this.toggleTodo = bind(this.toggleTodo, this);
+      this.window = window;
       this.sidebar = $('aside');
+      this.navBar = document.querySelector('.navbar-gitlab');
+      this.layoutNav = document.querySelector('.layout-nav');
+      this.rightSidebar = document.querySelector('.js-right-sidebar');
+      this.navHeight = this.navBar.clientHeight + this.layoutNav.clientHeight + 1;
+      this.setSidebarHeight();
       this.removeListeners();
       this.addEventListeners();
     }
@@ -23,7 +29,7 @@ import Cookies from 'js-cookie';
 
     Sidebar.prototype.addEventListeners = function() {
       const $document = $(document);
-      const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight, 10);
+      const throttledSetSidebarHeight = this.setSidebarHeight.bind(this);
 
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
       $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
@@ -209,14 +215,10 @@ import Cookies from 'js-cookie';
     };
 
     Sidebar.prototype.setSidebarHeight = function() {
-      const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight() + $('.sub-nav-scroll').outerHeight();
-      const $rightSidebar = $('.js-right-sidebar');
-      const diff = $navHeight - $(window).scrollTop();
-      if (diff > 0) {
-        $rightSidebar.outerHeight($(window).height() - diff);
-      } else {
-        $rightSidebar.outerHeight('100%');
-      }
+      let diff = this.navHeight - this.window.scrollY;
+      diff = diff < 0 ? 0 : diff;
+
+      this.rightSidebar.style.transform = `translateY(${diff}px)`;
     };
 
     Sidebar.prototype.isOpen = function() {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index a5a8522739e..6a23acf97ef 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -247,12 +247,6 @@ span.idiff {
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 30px;
-    position: relative;
-  }
-
-  .btn-clipboard {
-    position: absolute;
-    right: 0;
   }
 
   a {
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index eadb9409fee..3dcc7e284cd 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -3,8 +3,6 @@
   margin: 0;
   margin-bottom: $gl-padding;
   font-size: 14px;
-  position: relative;
-  z-index: 1;
 
   .flash-notice {
     @extend .alert;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index e6d808717f3..2316dfd8eab 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -420,16 +420,13 @@
 
 .page-with-layout-nav {
   .right-sidebar {
-    top: ($header-height + 1) * 2;
+    padding-bottom: 102px;
+    transform: translateY(($header-height + 1) * 2);
   }
 
   &.page-with-sub-nav {
     .right-sidebar {
-      top: ($header-height + 1) * 3;
-
-      &.affix {
-        top: 0;
-      }
+      transform: translateY(($header-height + 1) * 3);
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3ef6ec3f912..6e27fa675c6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -75,7 +75,7 @@ $red-800: #8b2615;
 $red-900: #711e11;
 
 $black: #000;
-$black-transparent: rgba(0, 0, 0, 0.3);
+$black-transparent: #b3b3b3;
 
 $border-white-light: darken($white-light, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);
@@ -98,7 +98,7 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
-$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color: #262626;
 $gl-text-color-secondary: rgba(0, 0, 0, .55);
 $gl-text-color-disabled: rgba(0, 0, 0, .35);
 $gl-text-green: $green-600;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 1b4694377b3..fb399f691ee 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -99,10 +99,6 @@
         line-height: $code_line_height;
         font-size: $code_font_size;
 
-        &.noteable_line {
-          position: relative;
-        }
-
         span {
           white-space: pre-wrap;
         }
@@ -153,11 +149,9 @@
     }
 
     .line_content {
-      display: block;
       margin: 0;
       padding: 0 1.5em;
       border: none;
-      position: relative;
 
       &.parallel {
         display: table-cell;
@@ -171,7 +165,7 @@
         &::before {
           content: '-';
           position: absolute;
-          left: 0.5em;
+          margin-left: -15px;
         }
       }
 
@@ -179,13 +173,13 @@
         &::before {
           content: '+';
           position: absolute;
-          left: 0.5em;
+          margin-left: -15px;
         }
       }
     }
 
     .text-file.diff-wrap-lines table .line_holder td span {
-      white-space: pre-wrap;
+      // white-space: pre-wrap;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 8d3d1a72b9b..691a54f9ab0 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -189,8 +189,8 @@
 }
 
 .right-sidebar {
-  position: absolute;
-  top: $header-height;
+  position: fixed;
+  top: 0;
   bottom: 0;
   right: 0;
   transition: width .3s;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 2ea2ff8362b..328f121fc26 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -530,7 +530,6 @@ ul.notes {
  */
 
 .add-diff-note {
-  display: none;
   margin-top: -2px;
   border-radius: 50%;
   background: $white-light;
@@ -543,6 +542,7 @@ ul.notes {
   width: 23px;
   height: 23px;
   border: 1px solid $blue-500;
+  opacity: 0;
   transition: transform .1s ease-in-out;
 
   &:hover {
@@ -560,7 +560,7 @@ ul.notes {
 .diff-file {
   .is-over {
     .add-diff-note {
-      display: inline-block;
+      opacity: 01
     }
   }
 }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 2e0d6a129fb..e38618665d1 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -3,7 +3,7 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('issuable')
 
-%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar{ class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header