Refactor kbn_chrome and app_switcher.

- Rename app_switcher -> global_nav, and rename associated services and subcomponents accordingly.
- Rename chrome.html -> kbn_chrome.html and create kbn_chrome.less.

src/core_plugins/kibana/public/dashboard/directives/grid.js

@@ -100,7 +100,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
         safeLayout();
         $window.on('resize', safeLayout);
         $scope.$on('ready:vis', safeLayout);
-        $scope.$on('appSwitcher:update', safeLayout);
+        $scope.$on('globalNav:update', safeLayout);
       }
 
       // return the panel object for an element.

src/ui/public/chrome/directives/app_switcher/__tests__/app_switcher.js → src/ui/public/chrome/directives/global_nav/app_switcher/__tests__/app_switcher.js

@@ -26,7 +26,7 @@ describe('appSwitcher directive', function () {
 
       env = {
         $scope: $rootScope,
-        $el: $compile($('<app-switcher>'))($rootScope),
+        $el: $compile($('<app-switcher chrome="chrome">'))($rootScope),
         currentHref: href,
         location: domLocation
       };

src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html

@@ -0,0 +1,11 @@
+
+<global-nav-link
+  ng-repeat="link in switcher.shownNavLinks"
+  is-active="link.active"
+  is-disabled="!switcher.isNavLinkEnabled(link)"
+  tooltip-content="getTooltip(link)"
+  on-click="switcher.ensureNavigation($event, link)"
+  href="link.active ? link.url : (link.lastSubUrl || link.url)"
+  icon="link.icon"
+  title="link.title"
+></global-nav-link>

src/ui/public/chrome/directives/app_switcher/app_switcher.js → src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.js

@@ -1,7 +1,6 @@
 import DomLocationProvider from 'ui/dom_location';
 import { parse } from 'url';
 import { bindKey } from 'lodash';
-import './app_switcher.less';
 import uiModules from 'ui/modules';
 import appSwitcherTemplate from './app_switcher.html';
 
@@ -55,11 +54,12 @@ uiModules
 .directive('appSwitcher', function () {
   return {
     restrict: 'E',
+    scope: {
+      chrome: '=',
+    },
     template: appSwitcherTemplate,
     controllerAs: 'switcher',
-    controller($scope, appSwitcherEnsureNavigation, appSwitcherState) {
-      // since we render this in an isolate scope we can't "require: ^chrome", but
-      // rather than remove all helpfull checks we can just check here.
+    controller($scope, appSwitcherEnsureNavigation, globalNavState) {
       if (!$scope.chrome || !$scope.chrome.getNavLinks) {
         throw new TypeError('appSwitcher directive requires the "chrome" config-object');
       }
@@ -76,7 +76,7 @@ uiModules
       $scope.getTooltip = link => {
         // If the sidebar is open then we don't need to show the title because
         // it will already be visible.
-        if (appSwitcherState.isOpen()) {
+        if (globalNavState.isOpen()) {
           return link.tooltip;
         }
         return link.tooltip ? link.title + ' - ' + link.tooltip : link.title;

src/ui/public/chrome/directives/global_nav/global_nav.html

@@ -0,0 +1,46 @@
+<nav
+  class="global-nav"
+  ng-class="{'is-global-nav-open': isGlobalNavOpen}"
+  ng-show="isVisible"
+>
+  <!-- Logo -->
+  <li
+    ng-if="!logoBrand && !smallLogoBrand"
+    aria-label="{{ appTitle }} Logo"
+    class="logo kibana"
+  ></li>
+
+  <li
+    ng-if="logoBrand"
+    ng-style="{ 'background': logoBrand }"
+    aria-label="{{ appTitle }} Logo"
+    class="logo hidden-sm"
+  ></li>
+
+  <li
+    ng-if="smallLogoBrand"
+    ng-style="{ 'background': smallLogoBrand }"
+    aria-label="{{ appTitle }} Logo"
+    class="logo-small visible-sm hidden-xs"
+  ></li>
+
+  <!-- Main apps -->
+  <app-switcher
+    chrome="chrome"
+  ></app-switcher>
+
+  <!-- Bottom button -->
+  <div class="gloal-nav__bottom-links">
+    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
+
+    <!-- Open/close sidebar -->
+    <global-nav-link
+      class="{{ globalNavToggleButton.classes }}"
+      tooltip-content="globalNavToggleButton.tooltipContent"
+      on-click="toggleGlobalNav($event)"
+      icon="'/plugins/kibana/assets/play-circle.svg'"
+      title="globalNavToggleButton.title"
+    ></global-nav-link>
+  </div>
+
+</nav>

src/ui/public/chrome/directives/global_nav/global_nav.js

@@ -0,0 +1,51 @@
+
+import './app_switcher';
+import './global_nav_link';
+
+import globalNavTemplate from './global_nav.html';
+import './global_nav.less';
+import uiModules from 'ui/modules';
+
+const module = uiModules.get('kibana');
+
+module.directive('globalNav', globalNavState => {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      chrome: '=',
+      isVisible: '=',
+      logoBrand: '=',
+      smallLogoBrand: '=',
+      appTitle: '=',
+    },
+    template: globalNavTemplate,
+    link: scope => {
+      // App switcher functionality.
+      function updateGlobalNav() {
+        const isOpen = globalNavState.isOpen();
+        scope.isGlobalNavOpen = isOpen;
+        scope.globalNavToggleButton = {
+          classes: isOpen ? 'global-nav-link--close' : undefined,
+          title: isOpen ? 'Collapse' : 'Expand',
+          tooltipContent: isOpen ? 'Collapse side bar' : 'Expand side bar',
+        };
+
+        // Notify visualizations, e.g. the dashboard, that they should re-render.
+        scope.$root.$broadcast('globalNav:update');
+      }
+
+      updateGlobalNav();
+
+      scope.$root.$on('globalNavState:change', () => {
+        updateGlobalNav();
+      });
+
+      scope.toggleGlobalNav = event => {
+        event.preventDefault();
+        globalNavState.setOpen(!globalNavState.isOpen());
+      };
+
+    }
+  };
+});

src/ui/public/chrome/directives/app_switcher/app_switcher.less → src/ui/public/chrome/directives/global_nav/global_nav.less

@@ -1,9 +1,7 @@
-@import (reference) "~ui/styles/mixins";
-@import (reference) "~ui/styles/variables";
 
-body { overflow-x: hidden; }
+@import (reference) "~ui/styles/variables";
 
-.app-links-wrapper {
+.global-nav {
   width: @as-closed-width;
   position: fixed;
   left: 0;
@@ -13,11 +11,13 @@ body { overflow-x: hidden; }
   background-color: @app-links-wrapper-background;
   overflow: hidden;
 
-  &.is-app-links-wrapper-open {
+  &.is-global-nav-open {
     width: @as-open-width;
+
     .app-title {
       display: inline-block;
     }
+
     + .app-wrapper {
       left: @as-open-width;
     }
@@ -36,38 +36,9 @@ body { overflow-x: hidden; }
       background-color: #e8488b;
     }
   }
+}
 
-  .bottom-apps {
+  .gloal-nav__bottom-links {
     position: absolute;
     bottom: 0;
   }
-}
-
-.app-wrapper {
-  .real-flex-parent();
-  position: absolute;
-  left: @as-closed-width;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  margin: 0 auto;
-  background-color: #fff;
-
-  /**
-   * 1. Dirty, but we need to override the .is-app-links-wrapper-open state
-   *    when we're looking at the log-in screen.
-   */
-  &.hidden-chrome {
-    left: 0 !important; /* 1 */
-  }
-
-  .navbar-right {
-    margin-right: 0;
-  }
-}
-
-  .app-wrapper-panel {
-    .flex-parent(@shrink: 0);
-    box-shadow: -4px 0px 3px rgba(0,0,0,0.2);
-  }