Show update notification icon on Extension Manager "Installed" tab

src/extensibility/ExtensionManagerDialog.js

@@ -191,13 +191,35 @@ define(function (require, exports, module) {
                 $(this).tab("show");
             });
 
+        function updateNotificationIcon(index) {
+            var model = models[index],
+                $notificationIcon = $dlg.find(".nav-tabs li").eq(index).find(".notification");
+            if (model.notifyCount) {
+                $notificationIcon.text(model.notifyCount);
+                $notificationIcon.show();
+            } else {
+                $notificationIcon.hide();
+            }
+        }
+
         // Initialize models and create a view for each model
         var modelInitPromise = Async.doInParallel(models, function (model, index) {
             var view    = new ExtensionManagerView(),
-                promise = view.initialize(model);
+                promise = view.initialize(model),
+                lastNotifyCount;
 
             promise.always(function () {
                 views[index] = view;
+
+                lastNotifyCount = model.notifyCount;
+                updateNotificationIcon(index);
+            });
+
+            $(model).on("change", function () {
+                if (lastNotifyCount !== model.notifyCount) {
+                    lastNotifyCount = model.notifyCount;
+                    updateNotificationIcon(index);
+                }
             });
 
             return promise;

src/extensibility/ExtensionManagerViewModel.js

@@ -117,6 +117,12 @@ define(function (require, exports, module) {
      */
     ExtensionManagerViewModel.prototype.message = null;
 
+    /**
+     * @type {number}
+     * Number to show in tab's notification icon. No icon shown if 0.
+     */
+    ExtensionManagerViewModel.prototype.notifyCount = 0;
+
     /**
      * @private {$.Promise}
      * Internal use only to track when initialization fails, see usage in _updateMessage.
@@ -374,6 +380,8 @@ define(function (require, exports, module) {
             });
         this._sortFullSet();
         this._setInitialFilter();
+        this._countUpdates();
+
         return new $.Deferred().resolve().promise();
     };
 
@@ -399,6 +407,16 @@ define(function (require, exports, module) {
         });
     };
 
+    InstalledViewModel.prototype._countUpdates = function () {
+        var self = this;
+        this.notifyCount = 0;
+        this.sortedFullSet.forEach(function (key) {
+            if (self.extensions[key].installInfo.updateAvailable) {
+                self.notifyCount++;
+            }
+        });
+    };
+
     /**
      * @private
      * Updates the initial set and filter as necessary when the status of an extension changes,
@@ -412,6 +430,7 @@ define(function (require, exports, module) {
         if (index !== -1 && !this.extensions[id].installInfo) {
             // This was in our set, but was uninstalled. Remove it.
             this.sortedFullSet.splice(index, 1);
+            this._countUpdates();  // may also affect update count
             refilter = true;
         } else if (index === -1 && this.extensions[id].installInfo) {
             // This was not in our set, but is now installed. Add it and resort.
@@ -422,6 +441,12 @@ define(function (require, exports, module) {
         if (refilter) {
             this.filter(this._lastQuery || "", true);
         }
+
+        if (this.extensions[id].installInfo) {
+            // If our count of available updates may have been affected, re-count
+            this._countUpdates();
+        }
+
         ExtensionManagerViewModel.prototype._handleStatusChange.call(this, e, id);
     };
 

src/htmlContent/extension-manager-dialog.html

@@ -5,7 +5,7 @@
                 <li><a href="#registry" class="registry" data-toggle="tab"><img src="styles/images/extension-manager-registry.svg"/><br/>{{Strings.EXTENSIONS_AVAILABLE_TITLE}}</a></li>
                 <!--<li><a href="#updates" class="updates" data-toggle="tab"><img src="styles/images/extension-manager-updates.svg"/><br/>{{Strings.EXTENSIONS_UPDATES_TITLE}}</a></li>-->
             {{/showRegistry}}
-            <li><a href="#installed" class="installed" data-toggle="tab"><img src="styles/images/extension-manager-installed.svg"/><br/>{{Strings.EXTENSIONS_INSTALLED_TITLE}}</a></li>
+            <li><a href="#installed" class="installed" data-toggle="tab"><img src="styles/images/extension-manager-installed.svg"/><br/>{{Strings.EXTENSIONS_INSTALLED_TITLE}}</a><span class="notification"></span></li>
         </ul>
         <div>
             <button class="search-clear"></button>

src/styles/brackets_patterns_override.less

@@ -727,6 +727,20 @@ a[href^="http"] {
                 background-color: #dfe2e2;
                 border-color: #b4b7b7 #b4b7b7 transparent #b4b7b7;
             }
+
+            > li {
+                position: relative;  // for positioning .notification icon
+                > .notification {
+                    display: none;  // hidden by default
+                    background-color: #A83F3F;
+                    color: white;
+                    border-radius: 16px;
+                    padding: 0 5px;
+                    position: absolute;
+                    right: 19px;
+                    top: 8px;
+                }
+            }
         }
 
         /* Search box */