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/meta-service.js

@@ -4,72 +4,36 @@
 angular.module('quay').factory('MetaService', ['$interpolate', 'Config', '$rootScope', '$interval',
     function($interpolate, Config, $rootScope, $interval) {
   var metaService = {};
-  var intervals = [];
 
-  var interpolate = function(page, expr, callback) {
-    var previous = '';
+  var interpolate = function(page, expr) {
+    if (!expr) {
+      return null;
+    }
 
-    var currentInterval = $interval(function() {
-      var inter = $interpolate(expr, true, null, true);
-      var result = inter(page.scope)
+    var inter = $interpolate(expr, true, null, true);
+    if (!inter) {
+      return null;
+    }
 
-      if (previous && result != previous) {
-        $interval.cancel(currentInterval);
-      }
-
-      previous = result;
-      callback(result);
-    }, 500);
-
-    intervals.push(currentInterval);
+    return inter(page.scope);
   };
 
-  var initial = function(value, default_value, callback) {
-    for (var i = 0; i < intervals.length; ++i) {
-      $interval.cancel(intervals[i]);
+  metaService.getTitle = function(page) {
+    if (!page || !page.$$route) {
+      return null;
     }
 
-    intervals = [];
-
-    if (!value) {
-      callback(default_value);
-      return;
-    }
-
-    if (value.indexOf('{{') < 0) {
-      callback(default_value);
-      return;
-    }
-
-    callback('Loading...');
-  };
-
-  metaService.getInitialTitle = function(page, callback) {
     var route = page.$$route;
-    initial(route && route.title, Config.REGISTRY_TITLE_SHORT, callback);
+    return interpolate(page, route && route.title);
   };
 
-  metaService.getInitialDescription = function(page, callback) {
-    var route = page.$$route;
-    initial(route && route.description, Config.REGISTRY_TITLE_SHORT, callback);
-  };
-
-  metaService.getTitle = function(page, callback) {
-    var route = page.$$route;
-    if (!route || !route.title || route.title.indexOf('{{') < 0) {
-      return;
+  metaService.getDescription = function(page) {
+    if (!page || !page.$$route) {
+      return null;
     }
 
-    interpolate(page, route.title, callback);
-  };
-
-  metaService.getDescription = function(page, callback) {
     var route = page.$$route;
-    if (!route || !route.description || route.description.indexOf('{{') < 0) {
-      return;
-    }
-
-    interpolate(page, route.description, callback);
+    return interpolate(route && route.description);
   };
 
   return metaService;

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;
 }]);

static/js/services/util-service.js

@@ -76,18 +76,5 @@ angular.module('quay').factory('UtilService', ['$sanitize', function($sanitize)
     return $sanitize(utilService.escapeHtmlString(text));
   };
 
-  utilService.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);
-  };
-
   return utilService;
 }]);