[console] reimplement the navbar by copying dashboard

src/plugins/console/public/css/sense.less

@@ -5,12 +5,6 @@ nav.navbar .logo.hidden-sm {
   display: block !important;
 }
 
-[sense-navbar] {
-  .server-url-form {
-    flex: 1 1 1%;
-  }
-}
-
 #editor_output_container {
   display: flex;
   flex: 1 1 auto;

src/plugins/console/public/index.html

@@ -1,6 +1,4 @@
-<navbar sense-navbar></navbar>
-
-<config config-template="sense.dropdown" config-object="sense"></config>
+<sense-navbar></sense-navbar>
 
 <div id="editor_output_container">
   <div id="editor_container">

src/plugins/console/public/src/directives/sense_navbar.html

@@ -0,0 +1,62 @@
+<navbar name="sense-options" class="kibana-nav-options">
+  <div class="kibana-nav-info">
+    <span ng-show="dash.id" class="kibana-nav-info-title">
+      Elasticsearch Console
+    </span>
+  </div>
+
+  <div class="button-group kibana-nav-actions" role="toolbar">
+    <button
+      ng-click="sense.dropdown.toggle('history')"
+      aria-label="History"
+      aria-haspopup="true"
+      aria-expanded="{{ sense.dropdown.is('history') }}"
+      ng-class="{active: sense.dropdown.is('save')}">
+      <span>History</span>
+    </button>
+
+    <button
+      aria-label="Settings"
+      aria-haspopup="true"
+      aria-expanded="{{ sense.dropdown.is('settings') }}"
+      ng-class="{active: sense.dropdown.is('settings')}"
+      ng-click="sense.dropdown.toggle('settings');">
+      <span>Settings</span>
+    </button>
+
+    <button
+      aria-label="Help"
+      aria-haspopup="true"
+      aria-expanded="{{ sense.dropdown.is('help') }}"
+      ng-class="{active: sense.dropdown.is('help')}"
+      ng-click="sense.dropdown.toggle('help');">
+      <span>Share</span>
+    </button>
+    <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+  </div>
+</navbar>
+<config config-template="sense.dropdown" config-object="sense"></config>
+
+<navbar ng-show="chrome.getVisible()" name="sense-serverInput">
+  <form
+    name="serverInput"
+    class="fill inline-form"
+    ng-submit="sense.sendSelected()"
+    role="form">
+
+    <input
+      type="text"
+      placeholder="http://servername:port"
+      aria-label="Server Name"
+      class="form-control"
+      ng-focus="navbar.updateServerUrlHistory()"
+      ng-blur="navbar.commitServerUrlFormModel()"
+
+      sense-uib-typeahead="url for url in navbar.serverUrlHistory"
+      ng-model="navbar.serverUrlFormModel"
+      typeahead-append-to-body="true"
+      typeahead-focus-first="false"
+
+      required>
+  </form>
+</navbar>

src/plugins/console/public/src/directives/sense_navbar.js

@@ -5,24 +5,34 @@ require('ui/modules')
 .get('app/sense')
 .directive('senseNavbar', function () {
   return {
-    restrict: 'A',
-    template: require('./navbar.html'),
+    restrict: 'E',
+    template: require('./sense_navbar.html'),
+    require: '^ngController',
+    scope: {},
+    link($scope, $el, attrs, sense) {
+      $scope.sense = sense
+      $scope.navbar.link($scope)
+    },
     controllerAs: 'navbar',
-    controller: function SenseNavbarController($scope, $element) {
-      this.serverUrlHistory = [];
-      this.updateServerUrlHistory = function () {
-        this.serverUrlHistory = history.getHistoricalServers();
-      };
+    controller: class SenseNavbarController {
+      constructor($scope) {
+        $scope.chrome = require('ui/chrome');
+        this.updateServerUrlHistory();
+      }
 
-      this.updateServerUrlHistory();
+      link($scope) {
+        $scope.$watch('sense.serverUrl', (url) => {
+          this.serverUrlFormModel = url
+        })
+      }
 
-      this.commitServerUrlFormModel = () => {
-        es.setBaseUrl(this.serverUrlFormModel);
-      };
+      updateServerUrlHistory() {
+        this.serverUrlHistory = history.getHistoricalServers();
+      }
 
-      $scope.$watch('sense.serverUrl', (serverUrl) => {
-        this.serverUrlFormModel = serverUrl;
-      });
+      commitServerUrlFormModel() {
+        es.setBaseUrl(this.serverUrlFormModel);
+      }
     }
   };
 });

src/plugins/console/public/src/directives/settings.html

@@ -5,7 +5,7 @@ <h3>Settings</h3>
     <h4>Editor &amp; Output pane settings</h4>
 
     <div class="form-group">
-      <label for="fontSize">Font Size</label>
+      <label>Font Size</label>
       <div>
         <input
           input-focus
@@ -19,7 +19,7 @@ <h4>Editor &amp; Output pane settings</h4>
     </div>
 
     <div class="checkbox">
-      <label for="wrapMode">
+      <label>
         <input type="checkbox" ng-model="settings.vals.wrapMode"/> Wrap long lines
       </label>
     </div>
@@ -30,7 +30,7 @@ <h4>Editor &amp; Output pane settings</h4>
     <h4>Autocomplete</h4>
 
     <div class="checkbox">
-      <label for="autocompleteFields">
+      <label>
         <input
           name="autocompleteFields"
           type="checkbox"
@@ -41,7 +41,7 @@ <h4>Autocomplete</h4>
     </div>
 
     <div class="checkbox">
-      <label for="autocompleteIndices">
+      <label>
         <input
           name="autocompleteIndices"
           type="checkbox"

src/ui/public/styles/base.less

@@ -134,6 +134,7 @@ a {
   cursor: pointer;
 }
 
+.application,
 .app-container {
   > * {
     position: relative;