Support multiline Timelion queries (#11972)

* Hardcode textarea input into timelion-expression-input.
- Document problems with using contenteditable.
- Use Angular directives to handle focus, blur, keydown, and keyup events.
- Also move getCaretOffset and setCaretOffset into the directive definition.
- Hide suggestions when the directive loses focuses.
- Show suggestions when the directive gains focus.
- Preserve focus when the user clicks a suggestion.
* Move expression input out of LocalNav and into main content area, so it won't overlap with graphs when focused.
* Refine design.
- Make suggestions popover charts instead of pushing them down.
- Align controls to top of expression input if the textarea is resized to be tall.
* Keep suggestions visible until the expression is complete and valid.
* Execute query with CMD+ENTER, to mirror Console behavior.
* Update UI so that textarea indicates it can support multiple lines, by having a taller min-height.
* Rename Timelion Docs to Help, for consistency with Console.
* Add keyboard tips to Timelion Help.
* Extract combobox keyboard codes to UI Framework comboBoxKeyCodes service.
* Add auto-complete tips to Help dropdown.

src/core_plugins/timelion/public/app.js

@@ -4,13 +4,14 @@ import moment from 'moment-timezone';
 import { DocTitleProvider } from 'ui/doc_title';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { notify } from 'ui/notify';
+import 'ui/accessibility/kbn_accessible_click';
 
 require('plugins/timelion/directives/cells/cells');
-require('plugins/timelion/directives/fullscreen/fullscreen');
-require('plugins/timelion/directives/interval/interval');
-require('plugins/timelion/directives/expression_directive');
 require('plugins/timelion/directives/fixed_element');
-require('plugins/timelion/directives/docs');
+require('plugins/timelion/directives/fullscreen/fullscreen');
+require('plugins/timelion/directives/timelion_expression_input');
+require('plugins/timelion/directives/timelion_help/timelion_help');
+require('plugins/timelion/directives/timelion_interval/timelion_interval');
 
 require('plugins/timelion/app.less');
 
@@ -48,8 +49,21 @@ require('ui/routes')
   });
 
 app.controller('timelion', function (
-    $scope, $http, timefilter, AppState, courier, $route, $routeParams,
-    kbnUrl, Notifier, config, $timeout, Private, savedVisualizations, confirmModal) {
+    $http,
+    $route,
+    $routeParams,
+    $scope,
+    $timeout,
+    AppState,
+    config,
+    confirmModal,
+    courier,
+    kbnUrl,
+    Notifier,
+    Private,
+    savedVisualizations,
+    timefilter
+  ) {
 
   // Keeping this at app scope allows us to keep the current page when the user
   // switches to say, the timepicker.
@@ -118,16 +132,15 @@ app.controller('timelion', function (
     template: require('plugins/timelion/partials/sheet_options.html'),
     testId: 'timelionOptionsButton',
   }, {
-    key: 'docs',
-    description: 'Documentation',
-    template: '<timelion-docs></timelion-docs>',
+    key: 'help',
+    description: 'Help',
+    template: '<timelion-help></timelion-help>',
     testId: 'timelionDocsButton',
   }];
 
-
   $timeout(function () {
     if (config.get('timelion:showTutorial', true)) {
-      $scope.kbnTopNav.open('docs');
+      $scope.kbnTopNav.open('help');
     }
   }, 0);
 
@@ -159,7 +172,7 @@ app.controller('timelion', function (
       dontShowHelp: function () {
         config.set('timelion:showTutorial', false);
         $scope.setPage(0);
-        $scope.kbnTopNav.close('docs');
+        $scope.kbnTopNav.close('help');
       }
     };
   };

src/core_plugins/timelion/public/app.less

@@ -10,11 +10,6 @@
   flex-direction: column;
 }
 
-.suggestions {
-  position: absolute;
-  top: 30px;
-}
-
 .timelion {
   position: relative;
 
@@ -24,16 +19,25 @@
   }
 }
 
-/**
- * 1. Needs to be relative to contain absolutely-positioned typeahead suggestions.
- */
-.timelionLocalSearch {
-  position: relative; /* 1 */
+.timelionHelpKeyboardTipsSection {
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.timelionSearchInputContainer {
+/**
+ * 1. Anchor suggestions beneath input.
+ * 2. Allow for option of positioning suggestions absolutely.
+ */
+.timelionExpressionInputContainer {
   flex: 1 1 auto;
   display: flex;
+  flex-direction: column; /* 1 */
+  position: relative; /* 2 */
+}
+
+.timelionExpressionInput {
+  min-height: 65px;
 }
 
 .timelion-container {
@@ -96,19 +100,6 @@
   opacity: 0.50;
 }
 
-.timelion-interval-custom {
-  width: 60px;
-}
-
-.timelion-interval-presets {
-  width: 90px;
-}
-
-.timelion-interval-presets-compact {
-  width: 10px;
-  padding-left: 0;
-}
-
 timelion-interval {
   display: flex;
 }

src/core_plugins/timelion/public/chain.peg

@@ -8,9 +8,13 @@
  }
 
  function simpleLocation (location) {
+  // Returns an object representing the position of the function within the expression,
+  // demarcated by the position of its first character and last character. We calculate these values
+  // using the offset because the expression could span multiple lines, and we don't want to deal
+  // with column and line values.
   return {
-   min: location.start.column,
-   max: location.end.column
+   min: location.start.offset,
+   max: location.end.offset
   }
  }
 
@@ -21,7 +25,7 @@
 }
 
 start
- = tree:series {
+ = space? tree:series {
   return {
     tree: tree.filter(function (o) {return o != null}),
     functions: functions,
@@ -87,7 +91,7 @@ function_name
  = first:[a-zA-Z]+ rest:[.a-zA-Z0-9_-]* { return first.join('') + rest.join('') }
 
 function "function"
- = space? '.' name:function_name space? '(' space? arg_list:arg_list? space? ')' {
+ = space? '.' name:function_name space? '(' space? arg_list:arg_list? space? ')' space? {
   var result = {
     type: 'function',
     function: name,