Reduce lag experienced when expanding doc table rows (#9326)

Improves responsiveness by avoiding a couple of forced reflows.

* Only renders JSON doc view when requested, instead of rendering it as soon as the row is expanded.
* Improves fixedScroll directive by avoiding width/height checks during the digest cycle.

src/ui/public/directives/__tests__/fixed_scroll.js

@@ -12,6 +12,11 @@ describe('FixedScroll directive', function () {
   const trash = [];
 
   beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.module(function ($provide) {
+    $provide.service('debounce', () => {
+      return targetFunction => targetFunction;
+    });
+  }));
   beforeEach(ngMock.inject(function ($compile, $rootScope) {
 
     compile = function (ratioY, ratioX) {

src/ui/public/doc_viewer/doc_viewer.js

@@ -30,7 +30,7 @@ uiModules.get('kibana')
           </li>`);
         $tabs.append($tab);
         const $viewAttrs = 'hit="hit" index-pattern="indexPattern" filter="filter" columns="columns"';
-        const $ext = $(`<render-directive ${$viewAttrs} ng-show="mode == '${view.name}'" definition="docViews['${view.name}'].directive">
+        const $ext = $(`<render-directive ${$viewAttrs} ng-if="mode == '${view.name}'" definition="docViews['${view.name}'].directive">
           </render-directive>`);
         $ext.html(view.directive.template);
         $content.append($ext);

src/ui/public/fixed_scroll.js

@@ -4,9 +4,14 @@ import uiModules from 'ui/modules';
 
 const SCROLLER_HEIGHT = 20;
 
+/**
+ * This directive adds a fixed horizontal scrollbar to the bottom of the window that proxies its scroll events
+ * to the target element's real scrollbar. This is useful when the target element's horizontal scrollbar
+ * might be waaaay down the page, like the doc table on Discover.
+ */
 uiModules
 .get('kibana')
-.directive('fixedScroll', function ($timeout) {
+.directive('fixedScroll', function (debounce) {
   return {
     restrict: 'A',
     link: function ($scope, $el) {
@@ -98,11 +103,21 @@ uiModules
         listen();
       }
 
-      // reset when the width or scrollWidth of the $el changes
-      $scope.$watchMulti([
-        function () { return $el.prop('scrollWidth'); },
-        function () { return $el.width(); }
-      ], setup);
+      let width;
+      let scrollWidth;
+      function checkWidth() {
+        const newScrollWidth = $el.prop('scrollWidth');
+        const newWidth = $el.width();
+
+        if (scrollWidth !== newScrollWidth || width !== newWidth) {
+          setup();
+
+          scrollWidth = newScrollWidth;
+          width = newWidth;
+        }
+      }
+
+      $scope.$watch(debounce(checkWidth, 100));
 
       // cleanup when the scope is destroyed
       $scope.$on('$destroy', function () {