Improve Context Log highlighting and UI. (#1)

* Move ContextLoadingButtons out of header into Context view.
* Add kuiButton--iconText modifier to ContextLoadingButtons.
* Use style guide color for highlighted Context Log row.
* Add Bar component. Use Bar to surface entry-pagination controls in Context Log. Refactor ContextSizePicker directive to surface a single input without surrounding text.
* Use Panel component to present loading feedback and table within Context app.
* Remove fading effect from truncated doc table rows, because it doesn't work with highlighted backgrounds. It also looks weird.
* Move bar component to match elastic#9803
* Update ui framework css bundle
* Move getter/setter into the size-picker
* Remove superfluous loading-button styling

src/core_plugins/kibana/public/context/app.html

@@ -1,71 +1,91 @@
-<div class="app-container">
-  <div class="kuiLocalNav">
-    <div class="kuiLocalNavRow">
-      <div class="kuiLocalNavRow__section">
-        <div class="kuiLocalBreadcrumbs">
-          <div class="kuiLocalBreadcrumb">
-            <a class="kuiLocalBreadcrumb__link" href="#/discover">Discover</a>
-          </div>
-          <div class="kuiLocalBreadcrumb" ng-bind="contextApp.state.queryParameters.indexPattern.id"></div>
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#/discover">Discover</a>
         </div>
-      </div>
-      <div class="kuiLocalNavRow__section">
-        <context-size-picker
-          predecessor-count="contextApp.state.queryParameters.predecessorCount"
-          successor-count="contextApp.state.queryParameters.successorCount"
-          set-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
-          set-successor-count="contextApp.actions.fetchGivenSuccessorRows"
-        />
+        <div class="kuiLocalBreadcrumb" ng-bind="contextApp.state.queryParameters.indexPattern.id"></div>
       </div>
     </div>
-    <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
-      <div class="kuiLocalTabs">
-        <div class="kuiLocalTab kuiLocalTab-isSelected" ng-bind-template="Context of {{ contextApp.state.queryParameters.anchorUid }}"></div>
-      </div>
+  </div>
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalTabs">
+      <div class="kuiLocalTab kuiLocalTab-isSelected" ng-bind-template="Context of {{ contextApp.state.queryParameters.anchorUid }}"></div>
     </div>
   </div>
+</div>
 
-  <div class="container-fluid" role="main">
-    <div class="row">
-      <div class="col-md-12">
-        <context-loading-button
-          disabled="contextApp.derivedState.isLoadingPredecessorRows()"
-          icon="'fa-chevron-up'"
-          ng-click="contextApp.actions.fetchMorePredecessorRows()"
-          ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
-        >
-          Load newer entries
-        </context-loading-button>
-      </div>
+<div class="kuiViewContent kuiViewContentItem" role="main">
+  <!-- Controls -->
+  <div class="kuiBar kuiVerticalRhythm">
+    <div class="kuiBarSection">
+      <context-loading-button
+        disabled="contextApp.derivedState.isLoadingPredecessorRows()"
+        icon="'fa-chevron-up'"
+        ng-click="contextApp.actions.fetchMorePredecessorRows()"
+        ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
+      >
+        Load newer entries
+      </context-loading-button>
     </div>
-    <div class="row">
-      <div class="col-md-12">
-        <div class="discover-overlay" ng-if="contextApp.derivedState.isLoadingAnchorRow()">
-          <h2>Loading...</h2>
-        </div>
-        <div class="discover-table" ng-if="!contextApp.derivedState.isLoadingAnchorRow()" fixed-scroll>
-          <doc-table
-            hits="contextApp.derivedState.rows()"
-            index-pattern="contextApp.state.queryParameters.indexPattern"
-            sorting="contextApp.state.queryParameters.sort"
-            columns="contextApp.state.queryParameters.columns"
-            infinite-scroll="true"
-          >
-          </doc-table>
-        </div>
-      </div>
+
+    <div class="kuiBarSection">
+      <div>Limit to</div>
+      <context-size-picker
+        count="contextApp.state.queryParameters.predecessorCount"
+        set-count="contextApp.actions.fetchGivenPredecessorRows"
+      ></context-size-picker>
+      <div>newer entries</div>
     </div>
-    <div class="row">
-      <div class="col-md-12">
-        <context-loading-button
-          disabled="contextApp.derivedState.isLoadingSuccessorRows()"
-          icon="'fa-chevron-down'"
-          ng-click="contextApp.actions.fetchMoreSuccessorRows()"
-          ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
-        >
-          Load older entries
-        </context-loading-button>
-      </div>
+  </div>
+
+  <!-- Loading feedback -->
+  <div
+    ng-if="contextApp.derivedState.isLoadingAnchorRow()"
+    class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
+  >
+    <div class="kuiLoadingItems">
+      Loading&hellip;
+    </div>
+  </div>
+
+  <!-- Table -->
+  <div
+    ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
+    class="kuiPanel kuiVerticalRhythm"
+  >
+    <div class="discover-table" fixed-scroll>
+      <doc-table
+        hits="contextApp.derivedState.rows()"
+        index-pattern="contextApp.state.queryParameters.indexPattern"
+        sorting="contextApp.state.queryParameters.sort"
+        columns="contextApp.state.queryParameters.columns"
+        infinite-scroll="true"
+      ></doc-table>
+    </div>
+  </div>
+
+  <!-- Controls -->
+  <div class="kuiBar kuiVerticalRhythm">
+    <div class="kuiBarSection">
+      <context-loading-button
+        disabled="contextApp.derivedState.isLoadingSuccessorRows()"
+        icon="'fa-chevron-down'"
+        ng-click="contextApp.actions.fetchMoreSuccessorRows()"
+        ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
+      >
+        Load older entries
+      </context-loading-button>
+    </div>
+
+    <div class="kuiBarSection">
+      <div>Limit to</div>
+      <context-size-picker
+        count="contextApp.state.queryParameters.successorCount"
+        set-count="contextApp.actions.fetchGivenSuccessorRows"
+      ></context-size-picker>
+      <div>older entries</div>
     </div>
   </div>
 </div>

src/core_plugins/kibana/public/context/app.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import uiModules from 'ui/modules';
 import contextAppTemplate from './app.html';
 import './components/loading_button';
-import './components/size_picker';
+import './components/size_picker/size_picker';
 import { bindSelectors } from './utils/selectors';
 import {
   QueryParameterActionsProvider,
@@ -17,7 +17,6 @@ import {
   selectRows,
 } from './query';
 
-
 const module = uiModules.get('apps/context', [
   'kibana',
   'ngRoute',

src/core_plugins/kibana/public/context/components/loading_button/loading_button.html

@@ -1,5 +1,5 @@
 <button
-  class="kuiButton kuiButton--basic contextLoadingButton"
+  class="kuiButton kuiButton--basic kuiButton--iconText"
   ng-disabled="disabled"
 >
   <span

src/core_plugins/kibana/public/context/components/loading_button/loading_button.js

@@ -1,6 +1,5 @@
 import uiModules from 'ui/modules';
 import contextLoadingButtonTemplate from './loading_button.html';
-import './loading_button.less';
 
 
 const module = uiModules.get('apps/context', [

src/core_plugins/kibana/public/context/components/size_picker/size_picker.html

@@ -1,16 +1,6 @@
-<div class="contextSizePicker">
-  <input
-    class="kuiTextInput contextSizePicker__item contextSizePicker__sizeInput"
-    ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
-    ng-model="vm.getOrSetPredecessorCount"
-    type="number"
-  />
-  <div class="contextSizePicker__item">newer and</div>
-  <input
-    class="kuiTextInput contextSizePicker__item contextSizePicker__sizeInput"
-    ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
-    ng-model="vm.getOrSetSuccessorCount"
-    type="number"
-  />
-  <div class="contextSizePicker__item">older entries</div>
-</div>
+<input
+  class="kuiTextInput contextSizePicker"
+  ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
+  ng-model="vm.getOrSetCount"
+  type="number"
+>

src/core_plugins/kibana/public/context/components/size_picker/size_picker.js

@@ -1,13 +1,10 @@
 import _ from 'lodash';
-
 import uiModules from 'ui/modules';
 import contextSizePickerTemplate from './size_picker.html';
 import './size_picker.less';
 
-
 const module = uiModules.get('apps/context', [
   'kibana',
-  'ngRoute',
 ]);
 
 module.directive('contextSizePicker', function ContextSizePicker() {
@@ -18,22 +15,18 @@ module.directive('contextSizePicker', function ContextSizePicker() {
     replace: true,
     restrict: 'E',
     scope: {
-      predecessorCount: '=',
-      successorCount: '=',
-      setPredecessorCount: '=',
-      setSuccessorCount: '=',
+      count: '=',
+      setCount: '=',
     },
     template: contextSizePickerTemplate,
   };
 });
 
+
 function ContextSizePickerController() {
   const vm = this;
 
-  vm.getOrSetPredecessorCount = (value) => (
-    _.isUndefined(value) ? vm.predecessorCount : vm.setPredecessorCount(value)
-  );
-  vm.getOrSetSuccessorCount = (value) => (
-    _.isUndefined(value) ? vm.successorCount : vm.setSuccessorCount(value)
+  vm.getOrSetCount = (count) => (
+    _.isUndefined(count) ? vm.count : vm.setCount(count)
   );
 }

src/core_plugins/kibana/public/context/components/size_picker/size_picker.less

@@ -1,20 +1,14 @@
+/**
+ * 1. Hide increment and decrement buttons for type="number" input.
+ */
 .contextSizePicker {
-  padding-right: 10px;
-  height: 100%;
-}
+  appearance: textfield;
+  text-align: center;
+  width: 3em;
 
-  .contextSizePicker__item {
-    display: inline-block;
-  }
-
-  .contextSizePicker__sizeInput {
-    appearance: textfield;
-    text-align: center;
-    width: 3em;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none; /* 1 */
+    margin: 0; /* 1 */
   }
+}

src/core_plugins/kibana/public/discover/styles/main.less

@@ -129,18 +129,13 @@
     }
 
     .discover-table-row--highlight {
-      font-weight: 900;
-      outline: 3px solid @discover-table-highlight-bg;
+      background-color: #E2F1F6;
 
       td {
         border-top: none !important;
       }
     }
 
-    .discover-table-togglefield--highlight {
-      background: @discover-table-highlight-bg;
-    }
-
 .shard-failures {
   color: @discover-shard-failures-color;
   background-color: @discover-shard-failures-bg !important;

src/ui/public/doc_table/components/table_row/open.html

@@ -1,4 +1,4 @@
-<td ng-click="toggleRow()" ng-class="{'discover-table-togglefield--highlight': row['$$_isAnchor']}">
+<td ng-click="toggleRow()">
   <i
     class="fa discover-table-open-icon"
     ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }">

src/ui/public/styles/table.less

@@ -21,6 +21,10 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
     }
   }
 
+  /**
+   * 1. Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
+   *    row in the Context Log.
+   */
   dl.source {
     margin-bottom: 0;
     line-height: 2em;
@@ -31,7 +35,7 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
     }
 
     dt {
-      background: @table-dt-bg;
+      background-color: rgba(108, 135, 142, 0.15); /* 1 */
       color: @table-dt-color;
       padding: @padding-xs-vertical @padding-xs-horizontal;
       margin-right: @padding-xs-horizontal;

src/ui/public/styles/truncate.less

@@ -1,37 +1,3 @@
-@import (reference) "~ui/styles/variables";
-
-@truncate1: fade(@truncate-color, 0%);
-@truncate2: fade(@truncate-color, 1%);
-@truncate3: fade(@truncate-color, 99%);
-@truncate4: fade(@truncate-color, 100%);
-
 .truncate-by-height {
-  position: relative;
   overflow: hidden;
-
-  &:before {
-    content: " ";
-    width: 100%;
-    height: 15px; // copied into index.html!
-    position: absolute;
-    left: 0;
-
-    // FF3.6+
-    background: -moz-linear-gradient(top,  @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-
-    // Chrome,Safari4+
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @truncate1), color-stop(1%, @truncate2), color-stop(99%, @truncate3), color-stop(100%, @truncate4));
-
-    // Chrome10+,Safari5.1+
-    background: -webkit-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-
-    // Opera 11.10+
-    background: -o-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-
-    // IE10+
-    background: -ms-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-
-    // W3C
-    background: linear-gradient(to bottom, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-  }
 }

src/ui/public/styles/variables/for-theme.less

@@ -82,7 +82,6 @@
 
 
 // table =======================================================================
-@table-dt-bg: @gray-lighter;
 @table-dt-color: @brand-primary;
 @table-cell-hover-bg: white;
 @table-cell-hover-hover-bg: @gray-lighter;

ui_framework/components/bar/_bar.scss

@@ -0,0 +1,7 @@
+.kuiBar {
+  @include bar;
+}
+
+.kuiBarSection {
+  @include barSection;
+}

ui_framework/components/bar/_index.scss

@@ -0,0 +1 @@
+@import "bar";