From ef9dd4210e1772f0b8e7d2aac2cd16803810529a 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 0c6b4e744c7..c38ed3f6e75 100644
--- a/ui/scripts/ui/core.js
+++ b/ui/scripts/ui/core.js
@@ -73,17 +73,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 2c518cbebfd..2cd0169b0c4 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -21,41 +21,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
      */
@@ -244,7 +209,6 @@
           .removeClass('maximized')
           .addClass('reduced')
       ).removeClass('active maximized');
-      _breadcrumb.fixSize($('#breadcrumbs'));
 
       $toRemove.animate(
         _panel.initialState($container),
@@ -330,8 +294,6 @@
         .addClass('active')
         .appendTo('#breadcrumbs ul');
 
-      _breadcrumb.fixSize($('#breadcrumbs'));
-
       // Reduced appearance for previous panels
       $panel.siblings().filter(function() {
         return $(this).index() < $panel.index();
@@ -352,7 +314,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 }, {
@@ -380,7 +342,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 087f5401d3d..2136d5cab19 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -1117,6 +1117,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