[extensions-web] js: Make the update UI more intuitive and easier to use

[Jasper St. Pierre <jstpierre src gnome org>]

commit c1d3d5bbbde6d6e33064cf058df2a1b8e33c4719
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Sun Apr 1 14:30:44 2012 -0400

    js: Make the update UI more intuitive and easier to use
    
    Replace the insensitive switch and label with an upgrade button

 sweettooth/static/css/sweettooth.css               |   15 +++++
 sweettooth/static/js/extensions.js                 |   60 +++++---------------
 sweettooth/static/js/main.js                       |    2 -
 sweettooth/static/js/templates/templatedata.js     |    4 -
 .../js/templates/upgrade/latest_version.mustache   |    1 -
 .../js/templates/upgrade/need_upgrade.mustache     |    1 -
 6 files changed, 30 insertions(+), 53 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 2c3fba7..e62efd7 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -316,6 +316,21 @@ li.extension:last-child {
     margin-top: 8px;
 }
 
+._gnome-switch.customized .update {
+    border-color: #559424;
+    background-color: #60b94a;
+    cursor: pointer;
+}
+
+._gnome-switch.customized .update:hover {
+    background-color: #71ca5b;
+}
+
+._gnome-switch.customized .error {
+    border-color: #a43465;
+    background-color: #d94a60;
+}
+
 @media screen and (max-width: 1165px) {
     .maxwidth {
         margin-left: 105px;
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index 732624c..0402f5b 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -66,10 +66,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             return this;
         };
 
-        $.fn.checkForUpdates = function() {
-            return this;
-        };
-
         return;
     }
 
@@ -113,6 +109,13 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                              action: action } });
         }
 
+        function upgradeExtension() {
+            $switch.switchify('customize').off('button-changed', upgradeExtension);
+            dbusProxy.UninstallExtension(uuid).done(function() {
+                dbusProxy.InstallExtension(uuid);
+            });
+        }
+
         $switch.bind('changed', function(e, newValue) {
             var oldState = $elem.data('state');
             if (newValue) {
@@ -143,7 +146,15 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             } else if (newState == ExtensionState.ENABLED) {
                 $switch.switchify('activate', true);
             } else if (newState == ExtensionState.ERROR) {
+                $switch.switchify('customize', "ERROR", 'error');
             } else if (newState == ExtensionState.OUT_OF_DATE) {
+                var svm = meta.shell_version_map || $elem.data('svm');
+                var version = extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion);
+                if (version === null) {
+                    $switch.switchify('customize', "OUTDATED", 'outdated');
+                } else {
+                    $switch.switchify('customize', "UPDATE", 'update').on('click', upgradeExtension);
+                }
             }
 
             if ($elem.data('uninstalled') && (newState == ExtensionState.ENABLED ||
@@ -328,45 +339,4 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             }
         });
     };
-
-    $.fn.checkForUpdates = function() {
-        return this.each(function() {
-            var $elem = $(this);
-            var svm = $elem.data('svm');
-            var uuid = $elem.data('uuid');
-            if (!svm)
-                return;
-
-            var vpk = extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion);
-
-            if (vpk === null)
-                return;
-
-            function upgrade() {
-                dbusProxy.UninstallExtension(uuid).done(function() {
-                    dbusProxy.InstallExtension(uuid, vpk.pk.toString());
-                });
-            }
-
-            dbusProxy.GetExtensionInfo(uuid).done(function(meta) {
-                var extensionName = $elem.find('.extension-name').text();
-                var $upgradeMe = $elem.find('.upgrade-me');
-                if (!meta)
-                    return;
-
-                var context = { latest_version: vpk.version,
-                                current_version: meta.version,
-                                extension_name: extensionName };
-
-                if (vpk.version > meta.version) {
-                    var msg = templates.upgrade.need_upgrade(context);
-                    $upgradeMe.append($('<a>', { href: '#' }).text(msg).click(upgrade));
-                } else if (vpk.version == meta.version) {
-                    var msg = templates.upgrade.latest_version(context);
-                    $upgradeMe.text(msg);
-                }
-            });
-        });
-    };
-
 });
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 5d666d4..736489f 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -169,8 +169,6 @@ function($, messages, modal) {
             return false;
         });
 
-        $('div.extension').checkForUpdates();
-
         var pk = $('.extension.single-page.can-edit').data('epk');
         if (pk) {
             var inlineEditURL = '/ajax/edit/' + pk;
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 97332f7..93979b3 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -17,9 +17,5 @@ define({
   }, 
   "paginator": {
     "loading_page": "<div class=\"loading-page\">\n  Loading page... please wait.\n</div>"
-  }, 
-  "upgrade": {
-    "latest_version": "You have the latest version of {{extension_name}}.", 
-    "need_upgrade": "You have version {{current_version}} of \"{{extension_name}}\". The latest version is version {{latest_version}}. Click here to upgrade."
   }
 });