[extensions-web] js: Don't require an out of date extension to show the upgrade button

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

commit 57644c2858f1366349035ae7f4c616ec928f5cd2
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Apr 16 15:38:37 2012 -0400

    js: Don't require an out of date extension to show the upgrade button
    
    Introduce a new "Upgrade" button, like the configure button, rather than
    trumping the switch. If this is too unwieldy, we can revert this and
    override the switch instead.

 sweettooth/static/css/sweettooth.css               |   57 +++++++++++--------
 sweettooth/static/images/upgrade.png               |  Bin 0 -> 1186 bytes
 sweettooth/static/js/extensions.js                 |   26 ++++-----
 .../js/templates/extensions/info_contents.mustache |    5 ++-
 sweettooth/static/js/templates/templatedata.js     |    2 +-
 5 files changed, 50 insertions(+), 40 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 324d09d..51b750c 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -309,24 +309,14 @@ 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: 1244px) {
+ media screen and (max-width: 1308px) {
     .maxwidth {
-        margin-left: 144px;
+        margin-left: 176px;
     }
 }
 
@@ -797,37 +787,56 @@ input[type=submit], button {
     transform: rotate(90deg);
 }
 
-.extension .configure-button {
+.extension .extra-buttons {
+    position: absolute;
+    margin-left: -172px;
+    margin-top: 8px;
+    width: 72px;
+}
+
+.extension .configure-button,
+.extension .upgrade-button {
     display: none;
 }
 
-.extension.configurable .configure-button {
-    display: block;
+.extension.configurable .configure-button,
+.extension.upgradable .upgrade-button {
+    float: right;
 
-    position: absolute;
-    margin-left: -136px;
-    margin-top: 8px;
+    display: block;
     height: 24px;
     width: 24px;
 
-    /* stolen from switch.css */
     font-weight: bold;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
-                 0 1px 0   rgba(0, 0, 0, 0.6);
     border-style: solid;
     border-width: 2px;
     text-align: center;
+    margin-right: 8px;
 
-    background-color: #4a90d9;
-    background-image: url(../images/configure-extension.png);
     background-repeat: no-repeat;
     background-position: 50% 50%;
     border-radius: 4px;
-    border-color: #3465a4;
     cursor: pointer;
 }
 
+.extension.configurable .configure-button {
+    background-color: #4a90d9;
+    background-image: url(../images/configure-extension.png);
+    border-color: #3465a4;
+}
+
 .extension.configurable .configure-button:hover {
     background-color: #5ba1ff;
     border-color: #5485c4;
 }
+
+.extension.upgradable .upgrade-button {
+    background-color: #60b94a;
+    background-image: url(../images/upgrade.png);
+    border-color: #559424;
+}
+
+.extension.upgradable .upgrade-button:hover {
+    background-color: #71ca5b;
+    border-color: #75a444;
+}
diff --git a/sweettooth/static/images/upgrade.png b/sweettooth/static/images/upgrade.png
new file mode 100644
index 0000000..72f9bce
Binary files /dev/null and b/sweettooth/static/images/upgrade.png differ
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index ec97f44..33b6997 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -94,6 +94,12 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             dbusProxy.LaunchExtensionPrefs(uuid);
         });
 
+        $elem.find('.upgrade-button').on('click', function() {
+            dbusProxy.UninstallExtension(uuid).done(function() {
+                dbusProxy.InstallExtension(uuid);
+            });
+        });
+
         $elem.data({'elem': $elem,
                     'state': _state,
                     'uninstalled': false,
@@ -109,13 +115,6 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                              action: action } });
         }
 
-        function upgradeExtension() {
-            $switch.switchify('customize').off('button-changed', upgradeExtension);
-            dbusProxy.UninstallExtension(uuid).done(function() {
-                dbusProxy.InstallExtension(uuid);
-            });
-        }
-
         // When the user flips the switch...
         $switch.on('changed', function(e, newValue) {
             var oldState = $elem.data('state');
@@ -138,6 +137,11 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             }
         });
 
+        var svm = meta.shell_version_map || $elem.data('svm');
+        var latest = extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion);
+        if (latest !== null && latest.version > meta.version)
+            $elem.addClass('upgradable');
+
         // When the extension changes state...
         $elem.on('state-changed', function(e, newState) {
             $elem.data('state', newState);
@@ -155,14 +159,8 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             } 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);
                 $elem.addClass('out-of-date');
-                if (version === null) {
-                    $switch.switchify('customize', "OUTDATED", 'outdated');
-                } else {
-                    $switch.switchify('customize', "UPDATE", 'update').on('click', upgradeExtension);
-                }
+                $switch.switchify('customize', "OUTDATED", 'outdated');
             }
 
             if ($elem.data('uninstalled') && (newState == ExtensionState.ENABLED ||
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache b/sweettooth/static/js/templates/extensions/info_contents.mustache
index ac889ca..aa43b17 100644
--- a/sweettooth/static/js/templates/extensions/info_contents.mustache
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -1,5 +1,8 @@
 <div class="switch"></div>
-<div class="configure-button"></div>
+<div class="extra-buttons">
+  <div class="upgrade-button"></div>
+  <div class="configure-button"></div>
+</div>
 <img class="icon" src="{{icon}}">
 <h3 class="extension-name">
   {{#link}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 8d837b2..73819c9 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -5,7 +5,7 @@ define({
   "extensions": {
     "error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", 
     "info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  {{>extensions.info_contents}}\n</div>", 
-    "info_contents": "<div class=\"switch\"></div>\n<div class=\"configure-button\"></div>\n<img class=\"icon\" src=\"{{icon}}\">\n<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n  {{/link}}\n  {{^link}}\n  {{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n<p class=\"description\">\n  {{first_line_of_description}}\n</p>\n{{#want_uninstall}}\n  <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}", 
+    "info_contents": "<div class=\"switch\"></div>\n<div class=\"extra-buttons\">\n  <div class=\"upgrade-button\"></div>\n  <div class=\"configure-button\"></div>\n</div>\n<img class=\"icon\" src=\"{{icon}}\">\n<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n  {{/link}}\n  {{^link}}\n  {{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n<p class=\"description\">\n  {{first_line_of_description}}\n</p>\n{{#want_uninstall}}\n  <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}", 
     "info_list": "<ul class=\"extensions\">\n{{#extensions}}\n  <li class=\"extension\" data-svm=\"{{shell_version_map}}\">\n    {{>extensions.info_contents}}\n  </li>\n{{/extensions}}\n</ul>", 
     "uninstall": "You uninstalled <b>{{name}}. <a href=\"#\">Undo?</a>"
   },