better plugin install page

app/scripts/plugins/plugin-manager.js

@@ -6,8 +6,6 @@ const Logger = require('../util/logger');
 
 const PluginManager = Backbone.Model.extend({
     defaults: {
-        installing: null,
-        lastInstall: null,
         plugins: new PluginCollection()
     },
 
@@ -29,18 +27,17 @@ const PluginManager = Backbone.Model.extend({
     },
 
     install(url, expectedManifest) {
-        const lastInstall = { url, dt: new Date() };
-        this.set({ installing: url, lastInstall: lastInstall });
+        this.trigger('change');
         return Plugin.loadFromUrl(url, expectedManifest).then(plugin => {
             return this.uninstall(plugin.id).then(() => {
                 return plugin.install(true, false).then(() => {
                     this.get('plugins').push(plugin);
-                    this.set({ installing: null });
+                    this.trigger('change');
                     this.saveState();
                 });
             });
         }).catch(e => {
-            this.set({ installing: null, lastInstall: _.extend(lastInstall, { error: e.toString() }) });
+            this.trigger('change');
             throw e;
         });
     },

app/scripts/views/settings/settings-plugins-view.js

@@ -25,6 +25,9 @@ const SettingsPluginsView = Backbone.View.extend({
     },
 
     searchStr: null,
+    installFromUrl: null,
+    installing: {},
+    installErrors: {},
 
     initialize() {
         this.listenTo(PluginManager, 'change', this.render.bind(this));
@@ -33,7 +36,7 @@ const SettingsPluginsView = Backbone.View.extend({
     },
 
     render() {
-        const lastInstall = PluginManager.get('lastInstall') || {};
+        const publicKey = SignatureVerifier.getPublicKey();
         this.renderTemplate({
             plugins: PluginManager.get('plugins').map(plugin => ({
                 id: plugin.id,
@@ -42,15 +45,16 @@ const SettingsPluginsView = Backbone.View.extend({
                 installTime: Math.round(plugin.get('installTime')),
                 updateError: plugin.get('updateError'),
                 updateCheckDate: Format.dtStr(plugin.get('updateCheckDate')),
-                installError: plugin.get('installError')
+                installError: plugin.get('installError'),
+                official: plugin.get('manifest').publicKey === publicKey
             })).sort(Comparators.stringComparator('id', true)),
-            lastInstallUrl: PluginManager.get('installing') || (lastInstall.error ? lastInstall.url : ''),
-            lastInstallError: lastInstall.error,
+            installingFromUrl: this.installFromUrl && !this.installFromUrl.error,
+            installUrl: this.installFromUrl ? this.installFromUrl.url : null,
+            installUrlError: this.installFromUrl ? this.installFromUrl.error : null,
             galleryLoading: PluginGallery.loading,
             galleryLoadError: PluginGallery.loadError,
             galleryPlugins: this.getGalleryPlugins(),
             searchStr: this.searchStr,
-            publicKey: SignatureVerifier.getPublicKey(),
             hasUnicodeFlags: FeatureDetector.hasUnicodeFlags()
         });
         if (this.searchStr) {
@@ -63,9 +67,16 @@ const SettingsPluginsView = Backbone.View.extend({
         if (!PluginGallery.gallery) {
             return null;
         }
+        const publicKey = SignatureVerifier.getPublicKey();
         const plugins = PluginManager.get('plugins');
         return PluginGallery.gallery.plugins
-            .map(pl => pl)
+            .map(pl => ({
+                url: pl.url,
+                manifest: pl.manifest,
+                installing: this.installing[pl.url],
+                installError: this.installErrors[pl.url],
+                official: pl.manifest.publicKey === publicKey
+            }))
             .filter(pl => !plugins.get(pl.manifest.name) &&
                 (!pl.manifest.locale || !SettingsManager.allLocales[pl.manifest.locale.name]))
             .sort((x, y) => x.manifest.name.localeCompare(y.manifest.name));
@@ -82,14 +93,19 @@ const SettingsPluginsView = Backbone.View.extend({
         }
         urlTextBox.prop('disabled', true);
         installBtn.text(Locale.setPlInstallBtnProgress + '...').prop('disabled', true);
+        this.installFromUrl = { url };
         PluginManager.install(url)
             .then(() => {
                 this.installFinished();
-                urlTextBox.val('');
+                this.installFromUrl = null;
+                this.render();
+                this.$el.closest('.scroller').scrollTop(0);
             })
             .catch(e => {
                 this.installFinished();
-                errorBox.text(e.toString());
+                this.installFromUrl.error = e;
+                this.$el.find('.settings__plugins-install-error').text(e.toString());
+                this.$el.closest('.scroller').scrollTop(this.$el.height());
             });
     },
 
@@ -135,10 +151,17 @@ const SettingsPluginsView = Backbone.View.extend({
         const pluginId = installBtn.data('plugin');
         const plugin = PluginGallery.gallery.plugins.find(pl => pl.manifest.name === pluginId);
         installBtn.text(Locale.setPlInstallBtnProgress + '...').prop('disabled', true);
+        this.installing[plugin.url] = true;
+        delete this.installErrors[plugin.url];
         PluginManager.install(plugin.url, plugin.manifest)
-            .catch(() => { })
+            .catch(e => {
+                this.installErrors[plugin.url] = e;
+                delete this.installing[plugin.url];
+                this.render();
+            })
             .then(() => {
                 installBtn.prop('disabled', true);
+                delete this.installing[plugin.url];
             });
     },
 

app/templates/settings/settings-plugins.hbs

@@ -16,11 +16,11 @@
             </div>
             <div class="settings__plugins-plugin-desc">
                 <a href="{{plugin.manifest.url}}" target="_blank">{{plugin.manifest.url}}</a>, v{{plugin.manifest.version}}.
-                {{#ifeq plugin.manifest.publicKey ../publicKey}}
+                {{#if plugin.official}}
                     {{res 'setPlOfficial'}},
                 {{else}}
                     {{#res 'setPlCreatedBy'}}<a href="{{plugin.manifest.author.url}}" target="_blank">{{plugin.manifest.author.name}}</a> ({{plugin.manifest.author.email}}){{/res}},
-                {{/ifeq}}
+                {{/if}}
                 {{#ifeq plugin.status 'active'}}
                     {{#res 'setPlLoadTime'}}{{plugin.installTime}}ms{{/res}}
                 {{else}}
@@ -75,21 +75,24 @@
                         {{#if plugin.manifest.resources.loc}}<li class="settings__plugins-plugin-file"><i class="fa fa-language"></i> {{res 'setPlLoc'}}: {{plugin.manifest.locale.title}}</li>{{/if}}
                     </ul>
                     <div class="settings__plugins-gallery-plugin-author muted-color">
-                        {{#ifeq plugin.manifest.publicKey ../publicKey}}
+                        {{#if plugin.official}}
                             <i class="fa fa-check"></i> {{res 'setPlOfficial'}}
                         {{else}}
                             <i class="fa fa-at"></i> <a href="{{plugin.manifest.author.url}}" target="_blank">{{plugin.manifest.author.name}}</a> ({{plugin.manifest.author.email}})
-                        {{/ifeq}}
+                        {{/if}}
                     </div>
+                    {{#if plugin.installError}}
+                        <div class="error-color">{{plugin.installError}}</div>
+                    {{/if}}
                     <button class="settings__plugins-gallery-plugin-install-btn"
                             data-plugin="{{plugin.manifest.name}}"
-                            {{#ifeq ../lastInstallUrl plugin.url}}disabled{{/ifeq}}
+                            {{#if plugin.installing}}disabled{{/if}}
                     >
-                        {{#ifeq ../lastInstallUrl plugin.url}}
+                        {{#if plugin.installing}}
                             {{res 'setPlInstallBtnProgress'}}...
                         {{else}}
                             {{res 'setPlInstallBtn'}}
-                        {{/ifeq}}
+                        {{/if}}
                     </button>
                 </div>
             {{/each}}
@@ -100,12 +103,10 @@
     <div class="settings__plugins-install-url">
         <div>{{res 'setPlInstallUrlDesc'}}</div>
         <label for="settings__plugins-install-url">{{res 'setPlInstallLabel'}}</label>
-        <input type="text" class="settings__input input-base" id="settings__plugins-install-url" value="{{lastInstallUrl}}" />
-        <button class="settings_plugins-install-btn" {{#if installing}}disabled{{/if}}>
-            {{#if installing}}{{res 'setPlInstallBtnProgress'}}{{else}}{{res 'setPlInstallBtn'}}{{/if}}
+        <input type="text" class="settings__input input-base" id="settings__plugins-install-url" value="{{installUrl}}" />
+        <button class="settings_plugins-install-btn" {{#if installingFromUrl}}disabled{{/if}}>
+            {{#if installingFromUrl}}{{res 'setPlInstallBtnProgress'}}{{else}}{{res 'setPlInstallBtn'}}{{/if}}
         </button>
-        {{#if lastInstallError}}
-            <div class="error-color settings__plugins-install-error">{{lastInstallError}}</div>
-        {{/if}}
+        <div class="error-color settings__plugins-install-error">{{installUrlError}}</div>
     </div>
 </div>