Merge lp:~rharding/juju-gui/help-dropdown into lp:juju-gui/experimental

[Richard Harding]

A dropdown view extension.

This is a refactoring of Huw's branch which created a dropdown widget
 and a "Help & Feedback" dropdown on the header bar.

 original: https://codereview.appspot.com/23410043/

 original original: https://codereview.appspot.com/25390043/

https://codereview.appspot.com/26200043/

[Richard Harding (rharding)]

Reviewers: mp+195116_code.launchpad.net,

Message:
Please take a look.

Description:
A dropdown view extension.

This is a refactoring of Huw's branch which created a dropdown widget
  and a "Help & Feedback" dropdown on the header bar.

  original: https://codereview.appspot.com/23410043/

  original original: https://codereview.appspot.com/25390043/

https://code.launchpad.net/~rharding/juju-gui/help-dropdown/+merge/195116

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/26200043/

Affected files (+675, -259 lines):
   A [revision details]
   M app/app.js
   A app/assets/javascripts/view-dropdown-extension.js
   M app/index.html
   M app/modules-debug.js
   M app/subapps/browser/browser.js
   A app/templates/help-dropdown.handlebars
   M app/templates/notifications.handlebars
   M app/templates/onboarding.handlebars
   M app/templates/overview.handlebars
   A app/views/help-dropdown.js
   M app/views/notifications.js
   M app/views/onboarding.js
   M bin/merge-files
   M lib/views/browser/onboarding.less
   M lib/views/dropdown.less
   M lib/views/stylesheet.less
   M test/index.html
   M test/test_browser_app.js
   A test/test_dropdown_extension.js
   A test/test_help_dropdown.js
   M test/test_notifications.js
   M test/test_onboarding.js
   M undocumented

[Richard Harding (rharding)]

LGTM see https://codereview.appspot.com/25390043/

https://codereview.appspot.com/26200043/

[Richard Harding (rharding)]

*** Submitted:

A dropdown view extension.

This is a refactoring of Huw's branch which created a dropdown widget
  and a "Help & Feedback" dropdown on the header bar.

  original: https://codereview.appspot.com/23410043/

  original original: https://codereview.appspot.com/25390043/

R=
CC=
https://codereview.appspot.com/26200043

https://codereview.appspot.com/26200043/

=== modified file 'app/app.js'
--- app/app.js	2013-11-07 21:10:06 +0000
+++ app/app.js	2013-11-13 18:41:54 +0000
@@ -126,7 +126,6 @@
         type: 'juju.views.NotificationsView',
         preserve: true
       }
-
     },
 
     /*
@@ -534,6 +533,7 @@
         } else {
           this.dispatch();
         }
+        this._renderHelpDropdownView();
       }, this);
 
       // Halt the default navigation on the juju logo to allow us to show
@@ -613,6 +613,23 @@
     },
 
     /**
+     * Handles rendering the help dropdown view on application load.
+     *
+     * @method _renderHelpDropdownView
+     */
+    _renderHelpDropdownView: function() {
+      this.helpDropdown = new views.HelpDropdownView({
+        container: Y.one('#help-dropdown'),
+        env: this.db.environment
+      }).render();
+      // pass in onboarding when we no longer need to support
+      // fullscreen mode and interact with it directly
+      this.helpDropdown.on('navigate', function(e) {
+        this.navigate(e.url);
+      }, this);
+    },
+
+    /**
       Calls the deployer import method with the bundle data
       to deploy the bundle to the environment.
 
@@ -674,6 +691,9 @@
     @method destructor
     */
     destructor: function() {
+      if (this.helpDropdown) {
+        this.helpDropdown.destroy();
+      }
       if (this._keybindings) {
         this._keybindings.detach();
       }
@@ -1344,6 +1364,7 @@
     'juju-ghost-inspector',
     'juju-view-bundle',
     'viewmode-controls',
+    'help-dropdown',
     'bundle-import-extension'
   ]
 });
 
=== added file 'app/assets/javascripts/view-dropdown-extension.js'
--- app/assets/javascripts/view-dropdown-extension.js	1970-01-01 00:00:00 +0000
+++ app/assets/javascripts/view-dropdown-extension.js	2013-11-13 18:41:54 +0000
@@ -0,0 +1,92 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+
+YUI.add('view-dropdown-extension', function(Y) {
+
+  /**
+   * Extension for a Y.View derrived class. Adds the dropdown
+   * functionality to the view. You need to call the _addDropdownFunc
+   * from the render method of the view to trigger because
+   * Y.View's do not offer any render event.
+   *
+   * @namespace juju
+   * @class Dropdown
+   */
+  function Dropdown() {}
+
+  Dropdown.prototype = {
+    /**
+     * Toggle the visibility of the dropdown panel.
+     *
+     * @method _toggleDropdown
+     * @param {Event} ev the click event from the control.
+     */
+    __toggleDropdown: function(ev) {
+      ev.halt();
+      this.get('container').toggleClass('open');
+    },
+
+    /**
+     * Hide the dropdown panel.
+     *
+     * @method close
+     */
+    __close: function() {
+      this.get('container').removeClass('open');
+    },
+
+    /**
+     * Sets up events and binds them to listeners.
+     *
+     * @method __bindUI
+     * @param {Y.Node} container The views container element.
+     */
+    __bindUI: function(container) {
+      this.addEvent(
+          container.one('.menu-link').on(
+              'click', this.__toggleDropdown, this));
+      this.addEvent(
+          container.on(
+              'clickoutside', this.__close, this));
+    },
+
+    /**
+     * Sets up the DOM nodes and renders them to the DOM.
+     *
+     * @method _addDropdownFunc
+     */
+    _addDropdownFunc: function() {
+      var container = this.get('container');
+      if (container) {
+        container.addClass('dropdown-menu');
+        this.__bindUI(container);
+      }
+    }
+  };
+
+  Y.namespace('juju').Dropdown = Dropdown;
+
+}, '0.1.0', {
+  requires: [
+    'event-tracker',
+    'view'
+  ]
+});
 
=== modified file 'app/index.html'
--- app/index.html	2013-11-07 16:50:47 +0000
+++ app/index.html	2013-11-13 18:41:54 +0000
@@ -147,19 +147,13 @@
               </a>
             </li>
             <li class="notifications-nav">
-                <div id="notifications"></div>
-                <div class="notifier-box"></div>
+              <span id="notifications"></span>
+              <span class="notifier-box"></span>
             </li>
           </ul>
           <ul class="right-nav">
-            <li class="help-dropdown">
-              <a href="">
-                Help & Feedback
-                <span class="expand">
-                  <i class="sprite chevron_down more"></i>
-                  <i class="sprite chevron_up less hidden"></i>
-                </span>
-              </a>
+            <li>
+              <span id="help-dropdown"></span>
             </li>
             <li>
               <a href="" id="logout-trigger" class="button inverse">Logout</a>
 
=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-11-07 15:49:57 +0000
+++ app/modules-debug.js	2013-11-13 18:41:54 +0000
@@ -185,6 +185,10 @@
           fullpath: '/juju-ui/assets/javascripts/bundle-import-extension.js'
         },
 
+        'view-dropdown-extension': {
+          fullpath: '/juju-ui/assets/javascripts/view-dropdown-extension.js'
+        },
+
         'sub-app': {
           fullpath: '/juju-ui/assets/javascripts/sub-app.js'
         },
@@ -233,6 +237,10 @@
           fullpath: '/juju-ui/views/notifications.js'
         },
 
+        'juju-help-dropdown': {
+          fullpath: '/juju-ui/views/help-dropdown.js'
+        },
+
         'juju-view-environment': {
           fullpath: '/juju-ui/views/environment.js'
         },
@@ -267,6 +275,7 @@
             'd3-components',
             'juju-templates',
             'juju-notifications',
+            'juju-help-dropdown',
             'juju-view-utils',
             'juju-topology',
             'juju-view-environment',
 
=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-11-05 18:10:05 +0000
+++ app/subapps/browser/browser.js	2013-11-13 18:41:54 +0000
@@ -626,13 +626,18 @@
      * Create a 'welcome' message walkthrough for new users.
      *
      * @method renderOnboarding
+     * @param {Boolean} force Whether it should force render the onboarding.
      */
-    renderOnboarding: function() {
+    renderOnboarding: function(force) {
       // Need to check onboarding exists due to the double dispatch bug.
       this._onboarding = new Y.juju.views.OnboardingView({
         'container': '#onboarding'
       });
 
+      if (force) {
+        this._onboarding.reset();
+      }
+
       if (!this._onboarding.get('seen')) {
         this._onboarding.render();
       }
@@ -861,10 +866,13 @@
       // Only show the onboarding messaging if we're hitting the sidebar view
       // without any extra url bits to the user. It's meant for a fresh user
       // to see, not someone doing what they know they want to do.
-      if (!this._onboarding) {
-        if (!this._viewState.search &&
-            !this._viewState.charmID) {
-          this.renderOnboarding();
+      var force = localStorage.getItem('force-onboarding');
+      // Reset force-onboarding so that the next request to /sidebar acts normal
+      localStorage.setItem('force-onboarding', '');
+
+      if (!this._onboarding || force) {
+        if (!this._viewState.search && !this._viewState.charmID) {
+          this.renderOnboarding(force);
         }
       }
 
 
=== added file 'app/templates/help-dropdown.handlebars'
--- app/templates/help-dropdown.handlebars	1970-01-01 00:00:00 +0000
+++ app/templates/help-dropdown.handlebars	2013-11-13 18:41:54 +0000
@@ -0,0 +1,29 @@
+<a href="" class="menu-link">
+  Help & feedback
+  <span class="expand">
+    <i class="sprite chevron_down more"></i>
+    <i class="sprite chevron_up less"></i>
+  </span>
+</a>
+<span class="dropdown right narrow">
+  <ul>
+    <li>
+      <a href="" class="start-onboarding">Tutorial</a>
+    </li>
+    <li>
+      <a href="http://juju.ubuntu.com/"
+         target="_blank">Visit: juju.ubuntu.com</a>
+    </li>
+    <li>
+      <a href="http://juju.ubuntu.com/docs"
+         target="_blank">Read the documentation</a>
+    </li>
+    <li>
+      <a href="https://www.surveymonkey.com/s/jujugui"
+       target="_blank">Take the survey</a>
+    </li>
+    <li class="landscape-url hidden">
+      <a href="">Landscape</a>
+    </li>
+  </ul>
+</span>
 
=== modified file 'app/templates/notifications.handlebars'
--- app/templates/notifications.handlebars	2013-10-24 18:02:16 +0000
+++ app/templates/notifications.handlebars	2013-11-13 18:41:54 +0000
@@ -1,25 +1,29 @@
-<span class="{{open}}">
-  <a href="" id="notify-indicator" data-target="notify-list">
-    {{count}}
-  </a>
-  <span id="notify-list" class="dropdown">
-    <h3>
-      {{count}} notifications
-    </h3>
-    <ul>
-      {{#notifications}}
-        <li id="{{clientId}}" class="notice">
-          <div>
-            <h4>{{title}}</h4>
-            <div>
-              {{message}}
-            </div>
-            <small data-timestamp="{{timestamp}}"
-                   class="timestamp">{{humanizeTime timestamp}}</small>
-          </div>
-        </li>
-      {{/notifications}}
-    </ul>
-  </span>
-  Notifications
+<a href="" class="menu-link">
+    <span id="notify-indicator">{{ count }}</span>
+    Notifications
+    <span class="expand">
+        <i class="sprite chevron_down more"></i>
+        <i class="sprite chevron_up less"></i>
+    </span>
+</a>
+<span class="dropdown">
+    <header>
+        {{count}} notifications
+    </header>
+    {{#if notifications}}
+        <ul>
+            {{#notifications}}
+                <li id="{{clientId}}" class="notice">
+                    <h4>{{title}}</h4>
+                    {{message}}
+                    <small data-timestamp="{{timestamp}}">
+                        {{humanizeTime timestamp}}
+                    </small>
+                </li>
+            {{/notifications}}
+        </ul>
+    {{else}}
+        <p>No notifications</p>
+    {{/if}}
+    <footer></footer>
 </span>
 
=== modified file 'app/templates/onboarding.handlebars'
--- app/templates/onboarding.handlebars	2013-10-23 18:09:52 +0000
+++ app/templates/onboarding.handlebars	2013-11-13 18:41:54 +0000
@@ -5,7 +5,7 @@
     </div>
 	<div id="onboarding-screen-mask"></div>
 	<div id="onboarding-message">
-	  <a class="onboarding-cross sprite close-inspector-normal" href="" ></a>
+	  <button class="onboarding-cross sprite close-inspector-normal" href="" ></button>
 	  <div class="panel panel-0">
 	    <h3 class="header type3">Welcome to Juju</h3>
 	    <p class="text type11">Use Juju to quickly create, configure and deploy your application architectures to public clouds like EC2,  Azure and HP, any OpenStack cloud and even your own Ubuntu based laptop with Charms.</p>
 
=== modified file 'app/templates/overview.handlebars'
--- app/templates/overview.handlebars	2013-10-18 16:47:34 +0000
+++ app/templates/overview.handlebars	2013-11-13 18:41:54 +0000
@@ -22,10 +22,6 @@
             <div class="menu-title">Select relation type:</div>
             <ul/>
         </div>
-      <div id="feedback-box">
-        <a target="_blank"
-           href="https://www.surveymonkey.com/s/jujugui">Feedback</a>
-      </div>
       {{> right-sidebar }}
     </div>
     <div id="rmrelation-modal-panel"></div>
 
=== added file 'app/views/help-dropdown.js'
--- app/views/help-dropdown.js	1970-01-01 00:00:00 +0000
+++ app/views/help-dropdown.js	2013-11-13 18:41:54 +0000
@@ -0,0 +1,113 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/**
+ * Provide the help dropdown view.
+ *
+ * @module views
+ */
+
+YUI.add('help-dropdown', function(Y) {
+
+  var views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets'),
+      Templates = views.Templates;
+
+  /**
+   * The view associated with the help dropdown.
+   *
+   * @class HelpDropdownView
+   */
+  var HelpDropdownView = Y.Base.create('HelpDropdownView', Y.View,
+      [
+        Y.juju.Dropdown,
+        Y.Event.EventTracker
+      ], {
+        template: Templates['help-dropdown'],
+
+        events: {
+          '.start-onboarding': {
+            click: '_startOnboarding'
+          }
+        },
+
+        /**
+         * Start the onboarding tutorial.
+         *
+         * @method _startOnboarding
+         * @param {Event} ev the click event from the control.
+         * @private
+         */
+        _startOnboarding: function(ev) {
+          ev.halt();
+          // Added by the view-dropdown-extension.js
+          this.__close(); // Closes itself
+          // Because we need the app to be in sidebar mode when
+          // the user views the onboarding we navigate to it.
+          // Once fullscreen is removed we can interact with
+          // onboarding here instead of in browser.js
+          localStorage.setItem('force-onboarding', true);
+          this.fire('navigate', { url: '/sidebar' });
+        },
+
+        /**
+         * Show the Landscape URL if available.
+         *
+         * @method _displayLandscapeURL
+         * @private
+         */
+        _displayLandscapeURL: function() {
+          var env = this.get('env'),
+              url = this.get('container').one('.landscape-url'),
+              baseLandscapeURL = views.utils.getLandscapeURL(env);
+
+          if (baseLandscapeURL) {
+            url.one('a').setAttribute('href', baseLandscapeURL);
+            url.removeClass('hidden');
+          }
+        },
+
+        /**
+         * Sets up the DOM nodes and renders them to the DOM.
+         *
+         * @method render
+         */
+        render: function() {
+          var container = this.get('container');
+          container.setHTML(this.template());
+          this._displayLandscapeURL();
+          // Added by the view-dropdown-extension.js
+          this._addDropdownFunc();
+          return this;
+        }
+      });
+
+  views.HelpDropdownView = HelpDropdownView;
+
+}, '0.1.0', {
+  requires: [
+    'view',
+    'juju-view-utils',
+    'event-tracker',
+    'node',
+    'handlebars',
+    'view-dropdown-extension'
+  ]
+});
 
=== modified file 'app/views/notifications.js'
--- app/views/notifications.js	2013-11-07 21:10:06 +0000
+++ app/views/notifications.js	2013-11-13 18:41:54 +0000
@@ -90,38 +90,6 @@
         },
 
         /**
-         * Event handler for clicking the notification icon.
-         *
-         * @method notifyToggle
-         */
-        notifyToggle: function(evt) {
-          evt.halt();
-          var container = this.get('container'),
-              notifications = this.get('notifications'),
-              target = evt.target.getAttribute('data-target'),
-              el = container.one('#' + target),
-              parent = el.ancestor();
-
-          if (notifications.size() === 0) {
-            return;
-          }
-
-          if (parent && parent.hasClass('open')) {
-            el.hide(true);
-          }
-          else {
-            el.show(true);
-          }
-
-          if (parent) {
-            parent.toggleClass('open');
-          }
-
-          el.toggleClass('active');
-
-        },
-
-        /**
          * Select/click on a notice. Currently this just removes it from the
          * model_list.
          *
@@ -230,7 +198,11 @@
    * @class NotificationsView
    */
   var NotificationsView = Y.Base.create('NotificationsView',
-      NotificationsBaseView, [], {
+      NotificationsBaseView,
+      [
+        Y.Event.EventTracker,
+        Y.juju.Dropdown
+      ], {
         template: Templates.notifications,
 
         /*
@@ -244,12 +216,6 @@
           seen: false
         },
 
-        events: {
-          '#notify-indicator': {
-            click: 'notifyToggle'
-          }
-        },
-
         /**
          * @method getShowable
          */
@@ -262,30 +228,15 @@
           });
         },
 
-        close: function() {
-          var container = this.get('container');
-          if (!container) {
-            return;
-          }
-
-          var indicator = container.one('#notify-indicator'),
-              list = container.one('#notify-list');
-
-          if (!indicator) {
-            return;
-          }
-          var parent = indicator.ancestor();
-
-          if (parent && parent.hasClass('open')) {
-            indicator.ancestor().removeClass('open');
-            list.hide();
-            indicator.removeClass('active');
-          }
-        },
-
+        /**
+          Renders the notification view and the dropdown widget.
+
+          @method render
+        */
         render: function() {
           NotificationsView.superclass.render.apply(this, arguments);
-          this.get('container').on('clickoutside', this.close, this);
+          // Added by the view-dropdown-extension.js
+          this._addDropdownFunc();
           return this;
         }
 
@@ -298,6 +249,8 @@
     'juju-view-utils',
     'node',
     'handlebars',
-    'notifier'
+    'notifier',
+    'view-dropdown-extension',
+    'event-tracker'
   ]
 });
 
=== modified file 'app/views/onboarding.js'
--- app/views/onboarding.js	2013-10-21 23:05:08 +0000
+++ app/views/onboarding.js	2013-11-13 18:41:54 +0000
@@ -72,6 +72,7 @@
       var container = this.get('container');
       container.hide();
       Y.one('#environment-help').removeClass('hidden');
+      localStorage.setItem('force-onboarding', '');
     },
 
     /**
@@ -182,6 +183,18 @@
     },
 
     /**
+      Sets the onboarding index back to 0, and the localstorage onboarding
+      flag to undefined.
+
+      @method reset
+    */
+    reset: function() {
+      this.onboardingIndex = 0;
+      localStorage.setItem('onboarding', '');
+      this.get('container').empty();
+    },
+
+    /**
      * Render the page.
      *
      * Reveal the mask element, and show the onboarding window.
 
=== modified file 'bin/merge-files'
--- bin/merge-files	2013-11-07 15:49:57 +0000
+++ bin/merge-files	2013-11-13 18:41:54 +0000
@@ -89,6 +89,7 @@
     'app/assets/javascripts/app-subapp-extension.js',
     'app/assets/javascripts/app-cookies-extension.js',
     'app/assets/javascripts/bundle-import-extension.js',
+    'app/assets/javascripts/view-dropdown-extension.js',
     'app/assets/javascripts/d3-components.js',
     'app/assets/javascripts/d3.min.js',
     'app/assets/javascripts/d3.status.js',
 
=== modified file 'lib/views/browser/onboarding.less'
--- lib/views/browser/onboarding.less	2013-10-29 02:29:58 +0000
+++ lib/views/browser/onboarding.less	2013-11-13 18:41:54 +0000
@@ -58,6 +58,11 @@
             color: @inspector-text-color;
         }
 
+        button {
+            border: none;
+            padding: 0;
+        }
+
         img {
           position: absolute;
         }
 
=== modified file 'lib/views/dropdown.less'
--- lib/views/dropdown.less	2013-10-29 03:07:12 +0000
+++ lib/views/dropdown.less	2013-11-13 18:41:54 +0000
@@ -1,62 +1,118 @@
-.dropdown {
-    .customize-scrollbar;
-    display: none;
-    position: absolute;
-    z-index: 1000;
-    top: @navbar-height;
-    left: 0;
-    width: 290px;
-    background-color: #eee;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
-    &.active {
+.dropdown-menu {
+    position: relative;
+    display: block;
+    margin: -20px -20px 0 -20px;
+
+    &.open {
+        .menu-link {
+            background-color: #000;
+
+            .expand {
+                .more {
+                    display: none;
+                }
+                .less {
+                    display: inline-block;
+                }
+            }
+        }
+        .dropdown {
+            display: block;
+        }
+    }
+    .menu-link {
+        .border-box;
         display: block;
-    }
-    a,
-    li {
-        color: #333;
-    }
-    h3 {
-        padding: 11px 20px;
-        background-color: #000;
-        color: #f2f2e6;
-        font-size: 16px;
-        font-weight: 300;
-    }
-    ul {
-        max-height: 500px;
-        overflow-y: auto;
-
+        height: @navbar-height;
+        padding: 20px 20px 0 20px;
+        color: #d7d3d0;
+
+        .expand {
+            margin-left: 5px;
+
+            .less {
+                display: none;
+            }
+        }
+    }
+    .dropdown {
+        .customize-scrollbar;
+        display: none;
+        position: absolute;
+        z-index: 1000;
+        top: @navbar-height;
+        left: 0;
+        width: 290px;
+        background-color: #eee;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+        &.right {
+            left: auto;
+            right: 0;
+            text-align: right;
+        }
+        &.narrow {
+            width: 230px;
+        }
+        a,
+        p,
         li {
-            border-top: 1px solid #efefef;
-            border-bottom: 1px solid #e2e2e2;
+            color: @text-colour;
+        }
+        p {
+            padding: 11px 20px;
+        }
+        header,
+        footer {
+            background-color: #000;
+        }
+        header {
+            padding: 11px 20px;
+            color: #f2f2e6;
+            font-size: 16px;
+            font-weight: 300;
+        }
+        footer {
             padding: 20px;
-
-            &:first-child {
-                border-top: none;
-            }
-            &:last-child {
-                border-bottom: none;
-            }
+            border-radius: 0 0 @border-radius @border-radius;
         }
-        // Notification items
-        .notice {
-            h4 {
-                font-weight: normal;
-                margin-bottom: 10px;
-            }
-            small {
-                display: block;
-                margin-top: 5px;
-                font-size: 10px;
-                color: #d0d0d0;
-            }
-            .error {
-                background-color: rgba(255, 0, 0, 0.1);
+        ul {
+            max-height: 500px;
+            overflow-y: auto;
+
+            li {
+                border-top: 1px solid #efefef;
+                border-bottom: 1px solid #e2e2e2;
+
+                &:first-child {
+                    border-top: none;
+                }
+                &:last-child {
+                    border-bottom: none;
+                }
+                a {
+                    display: block;
+                    padding: 15px 20px;
+
+                    &:hover {
+                        background-color: #e2e2e2;
+                    }
+                }
+            }
+            // Notification items
+            .notice {
+                padding: 20px;
+
+                h4 {
+                    margin-bottom: 10px;
+                }
+                small {
+                    display: block;
+                    margin-top: 5px;
+                    font-size: 11px;
+                    color: #aaa;
+                }
             }
         }
     }
 }
-.open .dropdown {
-    display: block;
-}
 
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-11-07 15:49:57 +0000
+++ lib/views/stylesheet.less	2013-11-13 18:41:54 +0000
@@ -175,16 +175,13 @@
  */
 .navbar {
     min-width: 800px;
-    // Need to subtract the bottom-border-height.
     height: @navbar-height;
     margin: -@navbar-height 0 0 0;
     background-color: #221e1b;
 
     &,
-    a {
+    & > ul > li > a {
         color: #d7d3d0;
-        font-size: 14px;
-        font-weight: 300;
     }
 
     ul {
@@ -277,24 +274,11 @@
             }
             &.notifications-nav {
                 position: relative;
-                padding: 0;
-
-                #notifications {
-                    & > span {
-                        .border-box;
-                        display: block;
-                        height: @navbar-height;
-                        padding: 15px 20px 0 20px;
-
-                        &.open {
-                            background-color: #000;
-                        }
-                        #notify-indicator {
-                            .button;
-                            margin: 0 9px 0 0;
-                            padding: 6px 12px;
-                        }
-                    }
+
+                #notify-indicator {
+                  .button;
+                  margin: -5px 9px 0 0;
+                  padding: 6px 12px;
                 }
             }
         }
@@ -314,18 +298,6 @@
                 background-color: #1f1b18;
             }
         }
-        .help-dropdown {
-            display: none;
-            position: relative;
-
-            .expand {
-                margin-left: 5px;
-
-                .hidden {
-                    display: none;
-                }
-            }
-        }
     }
 }
 #content {
@@ -717,41 +689,6 @@
 }
 
 /*
- * Feedback box
- * Appears as a tab on the side of the canvas.
- */
-#feedback-box {
-    position: absolute;
-    right: -40px;
-    bottom: 100px;
-    /* Up the z-index so the feedback box will overlay the zoom slider as it
-     * expands when hovered over */
-    z-index: 10;
-
-    a {
-        color: #fff;
-        background-color: @charm-panel-orange;
-        display: block;
-        line-height: 30px;
-        height: 40px;
-        font-weight: 500;
-        font-size: 16px;
-        padding: 0 10px;
-        margin-right: 3px;
-        -webkit-transition: all 0.15s ease-in-out;
-        -moz-transition: all 0.15s ease-in-out;
-        transition: all 0.15s ease-in-out;
-        .rotate(-90deg);
-
-        &:hover {
-            text-decoration: none;
-            background-color: #df6920;
-            margin-right: 13px;
-        }
-    }
-}
-
-/*
  * Canvas zoom control
  */
 .zoom-controls {
 
=== modified file 'test/index.html'
--- test/index.html	2013-10-31 14:16:29 +0000
+++ test/index.html	2013-11-13 18:41:54 +0000
@@ -70,6 +70,7 @@
   <script src="test_databinding.js"></script>
   <script src="test_d3_components.js"></script>
   <script src="test_d3_status.js"></script>
+  <script src="test_dropdown_extension.js"></script>
   <script src="test_endpoints.js"></script>
   <script src="test_env.js"></script>
   <script src="test_env_go.js"></script>
@@ -79,6 +80,7 @@
   <script src="test_fakebackend.js"></script>
   <script src="test_filter_widget.js"></script>
   <script src="test_ghost_inspector.js"></script>
+  <script src="test_help_dropdown.js"></script>
   <script src="test_inspector_charm.js"></script>
   <script src="test_inspector_constraints.js"></script>
   <script src="test_inspector_overview.js"></script>
 
=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-11-05 18:10:05 +0000
+++ test/test_browser_app.js	2013-11-13 18:41:54 +0000
@@ -1324,6 +1324,23 @@
         assert.deepEqual(hits, expected);
       });
 
+      it('onboarding is rendered with force-onboarding query', function(done) {
+        var req = {
+          path: '/sidebar'
+        };
+
+        localStorage.setItem('force-onboarding', true);
+
+        browser.renderOnboarding = function(force) {
+          assert.equal(force, 'true');
+          assert.equal(localStorage.getItem('force-onboarding'), '');
+          assert.deepEqual(hits.sidebar, true);
+          done();
+        };
+
+        browser.routeView(req, undefined, function() {});
+      });
+
       it('/minimized dispatches correctly', function() {
         var req = {
           path: '/minimized',
 
=== added file 'test/test_dropdown_extension.js'
--- test/test_dropdown_extension.js	1970-01-01 00:00:00 +0000
+++ test/test_dropdown_extension.js	2013-11-13 18:41:54 +0000
@@ -0,0 +1,80 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+
+describe('dropdown view extension', function() {
+  var Y, container, view, View;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(['view-dropdown-extension',
+                               'juju-tests-utils',
+                               'event-simulate',
+                               'node-event-simulate',
+                               'node'], function(Y) {
+
+      View = Y.Base.create('dropdown', Y.View, [
+        Y.juju.Dropdown,
+        Y.Event.EventTracker
+      ], {
+        template: '<a href="" class="menu-link"></a>' +
+            '<div class="dropdown"></div>',
+
+        render: function() {
+          this.get('container').setHTML(this.template);
+          this._addDropdownFunc();
+          return this;
+        }
+      });
+      done();
+    });
+  });
+
+  beforeEach(function() {
+    container = Y.namespace('juju-tests.utils').makeContainer();
+    view = new View({ container: container }).render();
+  });
+
+  afterEach(function() {
+    view.destroy();
+    container.remove().destroy(true);
+  });
+
+  it('should add the dropdown-menu class to the views container', function() {
+    assert.isTrue(container.hasClass('dropdown-menu'));
+  });
+
+  it('should open when the primary link is clicked', function(done) {
+    var link = container.one('.menu-link');
+    link.after('click', function() {
+      assert.isTrue(container.hasClass('open'));
+      done();
+    });
+    link.simulate('click');
+  });
+
+  it('should close when clicking outside the view', function() {
+    container.one('.menu-link').simulate('click');
+    assert.isTrue(container.hasClass('open'));
+
+    Y.one('body').simulate('click');
+    assert.isFalse(container.hasClass('open'));
+  });
+
+});
 
=== added file 'test/test_help_dropdown.js'
--- test/test_help_dropdown.js	1970-01-01 00:00:00 +0000
+++ test/test_help_dropdown.js	2013-11-13 18:41:54 +0000
@@ -0,0 +1,97 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+describe('help dropdown view', function() {
+
+  var db, envAnno, helpView, views, landscape, models, viewNode, Y;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(['node',
+      'juju-landscape',
+      'juju-models',
+      'juju-views',
+      'help-dropdown',
+      'juju-tests-utils'], function(Y) {
+
+      views = Y.namespace('juju.views');
+      models = Y.namespace('juju.models');
+
+      db = new models.Database();
+      landscape = new views.Landscape();
+      landscape.set('db', db);
+
+      done();
+    });
+  });
+
+  beforeEach(function() {
+    envAnno = db.environment.get('annotations');
+    viewNode = Y.namespace('juju-tests.utils').makeContainer('help-dropdown');
+  });
+
+  afterEach(function() {
+    viewNode.remove().destroy(true);
+    if (helpView) {
+      helpView.destroy();
+    }
+  });
+
+  it('renders the basic list', function() {
+    helpView = new views.HelpDropdownView({
+      container: viewNode,
+      env: db.environment
+    }).render();
+    // Landscape url should be hidden
+    var container = helpView.get('container');
+    assert.equal(
+        container.one('.landscape-url').getStyle('display'), 'none');
+    assert.equal(container.all('li').size(), 5);
+  });
+
+  it('should display the Landscape menu item', function() {
+    envAnno['landscape-url'] = 'http://landscape.example.com';
+    envAnno['landscape-computers'] = '/computers/criteria/environment:test';
+    new views.HelpDropdownView({
+      container: viewNode,
+      env: db.environment
+    }).render();
+
+    assert.equal(
+        viewNode.one('.landscape-url').getStyle('display'), 'list-item');
+    assert.equal(
+        viewNode.one('.landscape-url a').get('href'),
+        'http://landscape.example.com/computers/criteria/environment:test/');
+  });
+
+  it('can start the onboarding visualization', function(done) {
+    helpView = new views.HelpDropdownView({
+      container: viewNode,
+      env: db.environment
+    });
+    helpView.on('navigate', function(e) {
+      assert.equal(e.url, '/sidebar');
+      assert.equal(localStorage.getItem('force-onboarding'), 'true');
+      done();
+    });
+    helpView.render();
+    var ob = helpView.get('container').one('.start-onboarding');
+    ob.simulate('click');
+  });
+});
 
=== modified file 'test/test_notifications.js'
--- test/test_notifications.js	2013-10-29 23:10:25 +0000
+++ test/test_notifications.js	2013-11-13 18:41:54 +0000
@@ -159,7 +159,7 @@
                     nsRouter: nsRouter});
         view.render();
         // Verify the expected elements appear in the view
-        container.one('#notify-list').should.not.equal(undefined);
+        container.one('.dropdown').should.not.equal(undefined);
         container.destroy();
      });
 
@@ -330,33 +330,6 @@
        notice.get('message').should.equal('');
      });
 
-
-  it('should open on click and close on clickoutside', function(done) {
-    var container = Y.Node.create(
-        '<div id="test-container" style="display: none" class="container"/>'),
-        notifications = new models.NotificationList(),
-        env = juju.newEnvironment(),
-        view = new views.NotificationsView({
-          container: container,
-          notifications: notifications,
-          env: env,
-          nsRouter: nsRouter}).render(),
-        indicator;
-
-    Y.one('body').append(container);
-    notifications.add({title: 'testing', 'level': 'error'});
-    indicator = container.one('#notify-indicator');
-
-    indicator.simulate('click');
-    indicator.ancestor().hasClass('open').should.equal(true);
-
-    Y.one('body').simulate('click');
-    indicator.ancestor().hasClass('open').should.equal(false);
-
-    container.remove();
-    done();
-  });
-
 });
 
 
 
=== modified file 'test/test_onboarding.js'
--- test/test_onboarding.js	2013-10-23 00:12:47 +0000
+++ test/test_onboarding.js	2013-11-13 18:41:54 +0000
@@ -158,6 +158,7 @@
       onboard.closeHandler({halt: function() {}});
       assert.equal(container.getComputedStyle('display'), 'none');
       assert.isFalse(env_help.hasClass('hidden'));
+      assert.equal(localStorage.getItem('force-onboarding'), '');
     });
 
     it('should not be shown if seen before', function() {
@@ -171,5 +172,19 @@
       assert.isTrue(background instanceof Y.Node);
     });
 
+    it('sets index to 0, clears out local storage on reset', function() {
+      var onboard = new OnboardingView({
+        container: container
+      }).render();
+      onboard.nextHandler({halt: function() {}});
+      assert.equal(onboard.onboardingIndex, 1);
+
+      localStorage.setItem('onboarding', true);
+
+      onboard.reset();
+      assert.equal(onboard.onboardingIndex, 0);
+      assert.equal(localStorage.getItem('onboarding'), '');
+    });
+
   });
 })();
 
=== modified file 'undocumented'
--- undocumented	2013-10-02 16:26:20 +0000
+++ undocumented	2013-11-13 18:41:54 +0000
@@ -71,7 +71,6 @@
 app/views/notifications.js:42 "initializer"
 app/views/notifications.js:286 "render"
 app/views/notifications.js:173 "render"
-app/views/notifications.js:265 "close"
 app/views/databinding.js:81 "keyfunc"
 app/views/topology/panzoom.js:91 "renderSlider"
 app/views/topology/panzoom.js:265 "renderedHandler"