From f6cc89183184cbbdf212a4979b80c4c2287b12c3 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Wed, 1 Aug 2012 13:24:19 -0700
Subject: [PATCH] cloudBrowser / list view UI: Show subsection in breadcrumb

If in a section with multiple subsections, show active subsection in
the breadcrumb.

For example, if in storage->snapshots, display 'Storage - Snapshots'
based on the 'title' attribute for the main section and subsetion.

-- Note: this disables the 'fixSize' functionality which resizes long
   breadcrumb trails, due to incompatibility with this new feature. It
   is going to be reimplemented anyway, as it is fairly glitchy in its
   current incarnation.
---
 ui/scripts/ui/core.js                 |  9 ++++--
 ui/scripts/ui/widgets/cloudBrowser.js | 41 +--------------------------
 ui/scripts/ui/widgets/listView.js     | 12 ++++++++
 3 files changed, 19 insertions(+), 43 deletions(-)

diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
index 40e337b4eb7..f35c27c7196 100644
--- a/ui/scripts/ui/core.js
+++ b/ui/scripts/ui/core.js
@@ -70,17 +70,20 @@
       return $(this).hasClass(sectionID);
     });
     var data = args.sections[sectionID];
+    
     data.$browser = $browser;
-
     $navItem.siblings().removeClass('active');
     $navItem.addClass('active');
 
     // Reset browser panels
     $browser.cloudBrowser('removeAllPanels');
     $browser.cloudBrowser('addPanel', {
-      title: _l(data.title),
+      title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>',
       data: '',
-      complete: function($panel) {
+      complete: function($panel, $breadcrumb) {
+        $breadcrumb.attr('title', _l(data.title));
+        data.$breadcrumb = $breadcrumb;
+        
         // Hide breadcrumb if this is the home section
         if (args.home === sectionID) {
           $('#breadcrumbs').find('li:first, div.end:last').hide();
diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js
index 2ec0a199690..0f2d8f380a6 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -17,41 +17,6 @@
    * Breadcrumb-related functions
    */
   var _breadcrumb = cloudStack.ui.widgets.browser.breadcrumb = {
-    fixSize: function($breadcrumbContainer) {
-      var width = 0;
-      var containerWidth = $breadcrumbContainer.width();
-      var $elems = $breadcrumbContainer.find('ul li, div');
-
-      $elems.each(function() {
-        width += $(this).width();
-      });
-
-      if (width > containerWidth) {
-        $elems.filter('li').each(function() {
-          var targetWidth = $(this).width() - (
-            (width - containerWidth) / $elems.filter('li').size()
-          ) - 10;
-
-          $(this).width(targetWidth);
-
-          // Concatenate title
-          var $text = $(this).find('span');
-          var text = $(this).attr('title');
-
-          $text.html(
-            text
-              .substring(0, text.length - targetWidth / 15)
-              .concat('...')
-          );
-        });
-      } else {
-        $elems.css({ width: '' });
-        $elems.find('span').each(function() {
-          $(this).html($(this).closest('li').attr('title'));
-        });
-      }
-    },
-
     /**
      * Generate new breadcrumb
      */
@@ -240,7 +205,6 @@
           .removeClass('maximized')
           .addClass('reduced')
       ).removeClass('active maximized');
-      _breadcrumb.fixSize($('#breadcrumbs'));
 
       $toRemove.animate(
         _panel.initialState($container),
@@ -323,8 +287,6 @@
         .addClass('active')
         .appendTo('#breadcrumbs ul');
 
-      _breadcrumb.fixSize($('#breadcrumbs'));
-
       // Reduced appearance for previous panels
       $panel.siblings().filter(function() {
         return $(this).index() < $panel.index();
@@ -345,7 +307,7 @@
         $panel.css(
           { left: targetPosition }
         );
-        if (args.complete) args.complete($panel);
+        if (args.complete) args.complete($panel, _breadcrumb.filter($panel));
       } else {
         // Animate slide-in
         $panel.animate({ left: targetPosition }, {
@@ -372,7 +334,6 @@
       this.element.find('div.panel').remove();
       $('#breadcrumbs').find('ul li').remove();
       $('#breadcrumbs').find('ul div.end').remove();
-      _breadcrumb.fixSize($('#breadcrumbs'));
     }
   });
 
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 3618c71320b..4ba43f47212 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -1115,6 +1115,18 @@
 
     if (section) {
       listViewData = args.sections[section].listView;
+
+      var sectionTitle = _l(args.title);
+      var subsectionTitle = _l(args.sections[section].title);
+
+      // Show subsection in breadcrumb
+      if ((sectionTitle && subsectionTitle) && (sectionTitle != subsectionTitle)) {
+        args.$breadcrumb.find('span.subsection').html(' - ' + subsectionTitle);
+        args.$breadcrumb.attr('title', sectionTitle + ' - ' + subsectionTitle);
+      } else {
+        args.$breadcrumb.find('span.subsection').html('');
+        args.$breadcrumb.attr('title', sectionTitle);
+      }
     }
 
     // Create table and other elems