Merge branch '15664-remove-jquery-nicescroll' into 'master'

Resolve "Remove jQuery Nicescroll"

Closes #15664, #30860, and #35885

See merge request !13262

app/assets/javascripts/build.js

@@ -164,7 +164,6 @@ window.Build = (function () {
 
   Build.prototype.initSidebar = function () {
     this.$sidebar = $('.js-build-sidebar');
-    this.$sidebar.niceScroll();
   };
 
   Build.prototype.getBuildTrace = function () {

app/assets/javascripts/build_variables.js

@@ -2,7 +2,7 @@
 
 $(function() {
   $('.reveal-variables').off('click').on('click', function() {
-    $('.js-build').toggle().niceScroll();
+    $('.js-build-variables').toggle();
     $(this).hide();
   });
 });

app/assets/javascripts/commons/jquery.js

@@ -6,6 +6,5 @@ import 'vendor/jquery.endless-scroll';
 import 'vendor/jquery.caret';
 import 'vendor/jquery.atwho';
 import 'vendor/jquery.scrollTo';
-import 'vendor/jquery.nicescroll';
 import 'vendor/jquery.waitforimages';
 import 'select2/select2';

app/assets/javascripts/dispatcher.js

@@ -577,7 +577,6 @@ import GpgBadges from './gpg_badges';
               shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'), true);
-              new Sidebar();
               break;
             case 'snippets':
               shortcut_handler = new ShortcutsNavigation();

app/assets/javascripts/wikis.js

 /* global Breakpoints */
 
-import 'vendor/jquery.nicescroll';
 import './breakpoints';
 
 export default class Wikis {
@@ -8,7 +7,6 @@ export default class Wikis {
     this.bp = Breakpoints.get();
     this.sidebarEl = document.querySelector('.js-wiki-sidebar');
     this.sidebarExpanded = false;
-    $(this.sidebarEl).niceScroll();
 
     const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
     for (let i = 0; i < sidebarToggles.length; i += 1) {

app/assets/stylesheets/framework/layout.scss

@@ -109,16 +109,8 @@ body {
   }
 }
 
-
-/* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch,
-which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
-effects are commonly related to inconsisent z-index behavior (e.g. tooltips). By applying the following to direct children
-of the body element here, we negate cascading side effects but allow momentum scrolling to be applied to the body  */
-
-.navbar,
-.page-gutter,
-.page-with-sidebar {
-  -webkit-overflow-scrolling: auto;
+.page-with-sidebar > .content-wrapper {
+  min-height: calc(100vh - #{$header-height});
 }
 
 .with-performance-bar .page-with-sidebar {

app/assets/stylesheets/framework/sidebar.scss

@@ -78,15 +78,12 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
+  height: calc(100% - #{$header-height});
 
   &.affix {
     position: fixed;
     top: $header-height;
   }
-
-  &:not(.affix-top) {
-    min-height: 100%;
-  }
 }
 
 .with-performance-bar .right-sidebar.affix {

app/assets/stylesheets/new_sidebar.scss

@@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px;
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: 100%;
+    height: calc(100% - #{$header-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {

app/assets/stylesheets/pages/builds.scss

@@ -235,8 +235,18 @@
     display: none;
   }
 
+  .sidebar-container {
+    width: calc(100% + 100px);
+    padding-right: 100px;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .blocks-container {
     padding: 0 $gl-padding;
+    width: 289px;
   }
 
   .block {
@@ -259,7 +269,15 @@
     padding: 16px 0;
   }
 
+  .trigger-build-variables {
+    margin: 0;
+    overflow-x: auto;
+    -ms-overflow-style: scrollbar;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .trigger-build-variable {
+    font-weight: normal;
     color: $code-color;
   }
 
@@ -326,6 +344,7 @@
     border-top: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
     max-height: 300px;
+    width: 289px;
     overflow: auto;
 
     svg {

app/assets/stylesheets/pages/wiki.scss

@@ -95,12 +95,22 @@
 }
 
 .right-sidebar.wiki-sidebar {
-  padding: $gl-padding 0;
+  padding: 0;
 
   &.right-sidebar-collapsed {
     display: none;
   }
 
+  .sidebar-container {
+    padding: $gl-padding 0;
+    width: calc(100% + 100px);
+    padding-right: 100px;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .blocks-container {
     padding: 0 $gl-padding;
   }

app/views/projects/jobs/_sidebar.html.haml

 - builds = @build.pipeline.builds.to_a
 
 %aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
+  .sidebar-container
     .blocks-container
       .block
         %strong
@@ -49,11 +50,10 @@
             %p
               %button.btn.group.btn-group-justified.reveal-variables Reveal Variables
 
-
+            %dl.js-build-variables.trigger-build-variables.hide
               - @build.trigger_request.variables.each do |key, value|
-            .hide.js-build
-              .js-build-variable.trigger-build-variable= key
-              .js-build-value.trigger-build-value= value
+                %dt.js-build-variable.trigger-build-variable= key
+                %dd.js-build-value.trigger-build-value= value
 
       %div{ class: (@build.pipeline.stages_count > 1 ? "block" : "block-last") }
         %p
@@ -68,7 +68,7 @@
           #{@build.pipeline.git_commit_title}
 
       - if @build.pipeline.stages_count > 1
-      .dropdown.build-dropdown
+        .block-last.dropdown.build-dropdown
           %div
             %span{ class: "ci-status-icon-#{@build.pipeline.status}" }
               = ci_icon_for_status(@build.pipeline.status)

app/views/projects/wikis/_sidebar.html.haml

 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
+  .sidebar-container
     .block.wiki-sidebar-header.append-bottom-default
       %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
         = icon('angle-double-right')

spec/features/issues/issue_sidebar_spec.rb

@@ -130,8 +130,8 @@ feature 'Issue Sidebar' do
         it 'adds new label' do
           page.within('.block.labels') do
             fill_in 'new_label_name', with: 'wontfix'
-            page.find(".suggest-colors a", match: :first).click
-            click_button 'Create'
+            page.find('.suggest-colors a', match: :first).trigger('click')
+            page.find('button', text: 'Create').trigger('click')
 
             page.within('.dropdown-page-one') do
               expect(page).to have_content 'wontfix'
@@ -142,8 +142,8 @@ feature 'Issue Sidebar' do
         it 'shows error message if label title is taken' do
           page.within('.block.labels') do
             fill_in 'new_label_name', with: label.title
-            page.find('.suggest-colors a', match: :first).click
-            click_button 'Create'
+            page.find('.suggest-colors a', match: :first).trigger('click')
+            page.find('button', text: 'Create').trigger('click')
 
             page.within('.dropdown-page-two') do
               expect(page).to have_content 'Title has already been taken'

spec/javascripts/build_spec.js

@@ -5,7 +5,6 @@ import '~/lib/utils/datetime_utility';
 import '~/lib/utils/url_utility';
 import '~/build';
 import '~/breakpoints';
-import 'vendor/jquery.nicescroll';
 
 describe('Build', () => {
   const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;

spec/javascripts/labels_issue_sidebar_spec.js

@@ -4,7 +4,6 @@
 
 import '~/gl_dropdown';
 import 'select2';
-import 'vendor/jquery.nicescroll';
 import '~/api';
 import '~/create_label';
 import '~/issuable_context';