Simple Themes usability tweaks

src/extensibility/ExtensionManager.js

@@ -48,8 +48,7 @@ define(function (require, exports, module) {
         FileUtils           = require("file/FileUtils"),
         PreferencesManager  = require("preferences/PreferencesManager"),
         Strings             = require("strings"),
-        StringUtils         = require("utils/StringUtils"),
-        ThemeManager        = require("view/ThemeManager");
+        StringUtils         = require("utils/StringUtils");
 
     // semver.browser is an AMD-compatible module
     var semver = require("extensibility/node/node_modules/semver/semver.browser");
@@ -151,23 +150,6 @@ define(function (require, exports, module) {
         $(exports).triggerHandler("registryUpdate", [id]);
     }
 
-
-    /**
-     * @private
-     * Verifies if an extension is a theme based on the presence of the field "theme"
-     * in the package.json.  If it is a theme, then the theme file is just loaded by the
-     * ThemeManager
-     *
-     * @param {string} id of the theme extension to load
-     */
-    function loadTheme(id) {
-        var extension = extensions[id];
-        if (extension.installInfo && extension.installInfo.metadata && extension.installInfo.metadata.theme) {
-            ThemeManager.loadPackage(extension.installInfo);
-        }
-    }
-
-
     /**
      * @private
      * Sets our data. For unit testing only.
@@ -236,8 +218,9 @@ define(function (require, exports, module) {
      * When an extension is loaded, fetches the package.json and stores the extension in our map.
      * @param {$.Event} e The event object
      * @param {string} path The local path of the loaded extension's folder.
+     * @param {Package.OperationTypes} operationType Tells if the package is being installed or updated
      */
-    function _handleExtensionLoad(e, path) {
+    function _handleExtensionLoad(e, path, operationType) {
         function setData(id, metadata) {
             var locationType,
                 userExtensionPath = ExtensionLoader.getUserExtensionPath();
@@ -263,10 +246,10 @@ define(function (require, exports, module) {
                 metadata: metadata,
                 path: path,
                 locationType: locationType,
-                status: (e.type === "loadFailed" ? START_FAILED : ENABLED)
+                status: (e.type === "loadFailed" ? START_FAILED : ENABLED),
+                operationType: operationType
             };
             synchronizeEntry(id);
-            loadTheme(id);
             $(exports).triggerHandler("statusChange", [id]);
         }
 

src/extensibility/ExtensionManagerViewModel.js

@@ -513,6 +513,7 @@ define(function (require, exports, module) {
      */
     function ThemesViewModel() {
         ExtensionManagerViewModel.call(this);
+        this.infoMessage = Strings.REGISTRY_THEMES_INFO;
     }
 
     // Inheritance setup

src/extensibility/Package.js

@@ -58,6 +58,11 @@ define(function (require, exports, module) {
         NEEDS_UPDATE: "NEEDS_UPDATE",
         DISABLED: "DISABLED"
     };
+
+    var OperationTypes = {
+        INSTALL: "install",
+        UPDATE: "update"
+    };
 
     /**
      * @private
@@ -151,8 +156,8 @@ define(function (require, exports, module) {
                 destinationDirectory    = ExtensionLoader.getUserExtensionPath(),
                 disabledDirectory       = destinationDirectory.replace(/\/user$/, "/disabled"),
                 systemDirectory         = FileUtils.getNativeBracketsDirectoryPath() + "/extensions/default/";
-            
-            var operation = _doUpdate ? "update" : "install";
+
+            var operation = _doUpdate ? OperationTypes.UPDATE : OperationTypes.INSTALL;
             extensionManager[operation](path, destinationDirectory, {
                 disabledDirectory: disabledDirectory,
                 systemExtensionDirectory: systemDirectory,
@@ -171,7 +176,7 @@ define(function (require, exports, module) {
                             // On Windows, it looks like Node converts Unix-y paths to backslashy paths.
                             // We need to convert them back.
                             baseUrl: FileUtils.convertWindowsPathToUnixPath(result.installedTo)
-                        }, "main").then(function () {
+                        }, "main", operation).then(function () {
                             d.resolve(result);
                         }, function () {
                             d.reject(Errors.ERROR_LOADING);
@@ -506,4 +511,5 @@ define(function (require, exports, module) {
     exports.installUpdate = installUpdate;
     exports.formatError = formatError;
     exports.InstallationStatuses = InstallationStatuses;
+    exports.OperationTypes = OperationTypes;
 });

src/htmlContent/extension-manager-dialog.html

@@ -4,7 +4,6 @@
             {{#showRegistry}}
                 <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="#themes" class="themes" data-toggle="tab"><img src="styles/images/themes-icon.svg"/><br/>{{Strings.EXTENSIONS_THEMES_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"><span class="notification"></span><img src="styles/images/extension-manager-installed.svg"/><br/>{{Strings.EXTENSIONS_INSTALLED_TITLE}}</a></li>
         </ul>

src/htmlContent/themes-settings.html

@@ -5,39 +5,40 @@ <h1 class="dialog-title">{{Strings.THEMES_SETTINGS}}</h1>
     <div class="modal-body">
         <form class="form-horizontal">
             <div class="control-group">
-                <label class="control-label">{{Strings.CURRENT_THEME}}:</label>
+                <label class="control-label" for="themes-theme-dropdown">{{Strings.CURRENT_THEME}}:</label>
                 <div class="controls">
-                    <select>
+                    <select id="themes-theme-dropdown">
                         {{#themes}}
                         <option style="text-align:left;" value="{{name}}" data-target="theme">{{displayName}}</option>
                         {{/themes}}
                     </select>
+                    <p class="note-below-controls">{{Strings.GET_MORE_THEMES}}</p>
                 </div>
             </div>
 
             <div class="control-group">
-                <label class="control-label">{{Strings.USE_THEME_SCROLLBARS}}:</label>
+                <label class="control-label" for="themes-chk-themeScrollbars">{{Strings.USE_THEME_SCROLLBARS}}:</label>
                 <div class="controls">
                     {{#settings.themeScrollbars}}
-                        <input type="checkbox" data-target="themeScrollbars" checked>
+                        <input type="checkbox" id="themes-chk-themeScrollbars" data-target="themeScrollbars" checked>
                     {{/settings.themeScrollbars}}
                     {{^settings.themeScrollbars}}
-                        <input type="checkbox" data-target="themeScrollbars">
+                        <input type="checkbox" id="themes-chk-themeScrollbars" data-target="themeScrollbars">
                     {{/settings.themeScrollbars}}
                 </div>
             </div>
 
             <div class="control-group">
-                <label class="control-label">{{Strings.FONT_SIZE}}:</label>
+                <label class="control-label" for="themes-input-fontSize">{{Strings.FONT_SIZE}}:</label>
                 <div class="controls">
-                    <input type="text" data-target="fontSize" value="{{settings.fontSize}}">
+                    <input type="text" id="themes-input-fontSize" data-target="fontSize" value="{{settings.fontSize}}">
                 </div>
             </div>
 
             <div class="control-group">
-                <label class="control-label">{{Strings.FONT_FAMILY}}:</label>
+                <label class="control-label" for="themes-input-fontFamily">{{Strings.FONT_FAMILY}}:</label>
                 <div class="controls">
-                    <input type="text" data-target="fontFamily" value="{{settings.fontFamily}}">
+                    <input type="text" id="themes-input-fontFamily" data-target="fontFamily" value="{{settings.fontFamily}}">
                 </div>
             </div>
         </form>

src/nls/root/strings.js

@@ -457,6 +457,7 @@ define({
 
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Current Theme",
+    "GET_MORE_THEMES"                      : "To get more themes, use Extension Manager.",
     "USE_THEME_SCROLLBARS"                 : "Use Theme Scrollbars",
     "FONT_SIZE"                            : "Font Size",
     "FONT_FAMILY"                          : "Font Family",
@@ -551,10 +552,10 @@ define({
     "NO_EXTENSIONS"                        : "No extensions installed yet.<br>Click on the Available tab above to get started.",
     "NO_EXTENSION_MATCHES"                 : "No extensions match your search.",
     "REGISTRY_SANITY_CHECK_WARNING"        : "NOTE: These extensions may come from different authors than {APP_NAME} itself. Extensions are not reviewed and have full local privileges. Be cautious when installing extensions from an unknown source.",
+    "REGISTRY_THEMES_INFO"                 : "To switch between installed themes, use View > Themes\u2026",
     "EXTENSIONS_INSTALLED_TITLE"           : "Installed",
     "EXTENSIONS_AVAILABLE_TITLE"           : "Available",
     "EXTENSIONS_THEMES_TITLE"              : "Themes",
-    "EXTENSIONS_UPDATES_TITLE"             : "Updates",
 
     "INLINE_EDITOR_NO_MATCHES"             : "No matches available.",
     "INLINE_EDITOR_HIDDEN_MATCHES"         : "All matches are collapsed. Expand the files listed at right to view matches.",

src/styles/brackets_patterns_override.less

@@ -1966,5 +1966,10 @@ code {
         input[type='checkbox'] {
              margin-top: 8px;
         }
+
+        .note-below-controls {
+            margin: 4px 0 -3px 0;
+            color: @bc-text-thin-quiet;
+        }
      }
  }

src/utils/ExtensionLoader.js

@@ -227,11 +227,12 @@ define(function (require, exports, module) {
      * @param {!string} name, used to identify the extension
      * @param {!{baseUrl: string}} config object with baseUrl property containing absolute path of extension
      * @param {!string} entryPoint, name of the main js file to load
+     * @param {Package.OperationTypes} operationType Tells if the package is being installed or updated
      * @return {!$.Promise} A promise object that is resolved when the extension is loaded, or rejected
      *              if the extension fails to load or throws an exception immediately when loaded.
      *              (Note: if extension contains a JS syntax error, promise is resolved not rejected).
      */
-    function loadExtension(name, config, entryPoint) {
+    function loadExtension(name, config, entryPoint, operationType) {
         var promise = new $.Deferred();
 
         // Try to load the package.json to figure out if we are loading a theme.
@@ -247,9 +248,9 @@ define(function (require, exports, module) {
                 return loadExtensionModule(name, config, entryPoint);
             })
             .then(function () {
-                $(exports).triggerHandler("load", config.baseUrl);
+                $(exports).triggerHandler("load", [config.baseUrl, operationType]);
             }, function (err) {
-                $(exports).triggerHandler("loadFailed", config.baseUrl);
+                $(exports).triggerHandler("loadFailed", [config.baseUrl, operationType]);
             });
     }