Fix CPU issues by removing constant digesting. We do so by:

- Fixing the title and description (meta) to only respond to a rootScope watch, rather than using a timer
  - Change the tabs listening code to be completely self contained

static/js/services/ui-service.js

@@ -1,7 +1,7 @@
 /**
  * Service which provides helper methods for performing some simple UI operations.
  */
-angular.module('quay').factory('UIService', [function() {
+angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$location', function($timeout, $rootScope, $location) {
   var CheckStateController = function(items, opt_checked) {
     this.items = items;
     this.checked = opt_checked || [];
@@ -134,5 +134,121 @@ angular.module('quay').factory('UIService', [function() {
     });
   };
 
+  uiService.clickElement = function(el) {
+    // From: http://stackoverflow.com/questions/16802795/click-not-working-in-mocha-phantomjs-on-certain-elements
+    var ev = document.createEvent("MouseEvent");
+    ev.initMouseEvent(
+      "click",
+       true /* bubble */, true /* cancelable */,
+       window, null,
+       0, 0, 0, 0, /* coordinates */
+       false, false, false, false, /* modifier keys */
+       0 /*left*/, null);
+    el.dispatchEvent(ev);
+  };
+
+  uiService.initializeTabs = function(scope, element, opt_clickCallback) {
+    var locationListener = null;
+    var disposed = false;
+
+    var changeTab = function(activeTab) {
+      if (disposed) { return; }
+
+      $('a[data-toggle="tab"]').each(function(index) {
+        var tabName = this.getAttribute('data-target').substr(1);
+        if (tabName != activeTab) {
+          return;
+        }
+
+        if ($(this).parent().hasClass('active')) {
+          return;
+        }
+
+        if (this.clientWidth == 0) {
+          setTimeout(function() {
+            changeTab(activeTab);
+          }, 100);
+          return;
+        }
+
+        uiService.clickElement(this);
+      });
+    };
+
+    var resetDefaultTab = function() {
+      if (disposed) { return; }
+
+      $timeout(function() {
+        element.find('a[data-toggle="tab"]').each(function(index) {
+          if (index == 0) {
+            uiService.clickElement(this);
+          }
+        });
+      });
+    };
+
+    var checkTabs = function() {
+      if (disposed) { return; }
+
+      // Poll until we find the tabs.
+      var tabs = element.find('a[data-toggle="tab"]');
+      if (tabs.length == 0) {
+        $timeout(checkTabs, 50);
+        return;
+      }
+
+      // Register listeners.
+      registerListeners(tabs);
+
+      // Set the active tab (if any).
+      var activeTab = $location.search()['tab'];
+      if (activeTab) {
+        changeTab(activeTab);
+      }
+    };
+
+    var registerListeners = function(tabs) {
+      // Listen for scope destruction.
+      scope.$on('$destroy', function() {
+        dispoed = true;
+        locationListener && locationListener();
+      });
+
+      // Listen for route changes and update the tabs accordingly.
+      locationListener = $rootScope.$on('$routeUpdate', function(){
+        if ($location.search()['tab']) {
+          changeTab($location.search()['tab']);
+        } else {
+          resetDefaultTab();
+        }
+      });
+
+      // Listen for tab changes.
+      tabs.on('shown.bs.tab', function (e) {
+        // Invoke the callback, if any.
+        opt_clickCallback && opt_clickCallback();
+
+        // Update the search location.
+        var tabName = e.target.getAttribute('data-target').substr(1);
+        $rootScope.$apply(function() {
+          var isDefaultTab = tabs[0] == e.target;
+          var newSearch = $.extend($location.search(), {});
+          if (isDefaultTab) {
+            delete newSearch['tab'];
+          } else {
+            newSearch['tab'] = tabName;
+          }
+
+          $location.search(newSearch);
+        });
+
+        e.preventDefault();
+      });
+    };
+
+    // Start the checkTabs timer.
+    checkTabs();
+  };
+
   return uiService;
 }]);