Merge remote-tracking branch 'upstream/11053-remove-native-scrollbar' into 11053-remove-native-scrollbar

public/app/core/components/scroll/page_scroll.ts

@@ -29,7 +29,11 @@ export function pageScrollbar() {
       scope.$on('$routeChangeSuccess', () => {
         lastPos = 0;
         elem[0].scrollTop = 0;
+        elem[0].focus();
       });
+
+      elem[0].tabIndex = -1;
+      elem[0].focus();
     },
   };
 }

public/app/features/panel/panel_directive.ts

@@ -113,7 +113,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
           `;
 
           let scrollRoot = panelContent;
-          let scroller = panelContent.find(':first-child').find(':first-child');
+          let scroller = panelContent.find(':first').find(':first');
+
           scrollRoot.addClass(scrollRootClass);
           $(scrollBarHTML).appendTo(scrollRoot);
           scroller.addClass(scrollerClass);

public/app/plugins/panel/dashlist/module.html

@@ -1,3 +1,4 @@
+<div>
   <div class="dashlist" ng-repeat="group in ctrl.groups">
     <div class="dashlist-section" ng-if="group.show">
       <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
@@ -15,3 +16,4 @@
       </div>
     </div>
   </div>
+</div>

public/sass/components/_scrollbar.scss

@@ -268,10 +268,14 @@
   }
 }
 
-.baron._scrolling > .baron__track .baron__bar {
+.panel-hover-highlight .baron__track .baron__bar {
   opacity: 0.6;
 }
 
+.baron._scrolling > .baron__track .baron__bar {
+  opacity: 0.9;
+}
+
 .baron__control {
   display: none;
 }

public/views/index.template.html

@@ -40,7 +40,7 @@
     </div>
 
     <div class="main-view">
-      <div class="scroll-canvas">
+      <div class="scroll-canvas" page-scrollbar>
         <div ng-view></div>
 
         <footer class="footer">