Merge pull request #8282 from le717/issue-8216

TomMalbran · TomMalbran · commit 8ce9221ea8ec · 2014-07-21T19:12:59.000-07:00
Truncate extension descriptions
diff --git a/src/extensibility/ExtensionManager.js b/src/extensibility/ExtensionManager.js
@@ -575,6 +575,31 @@ define(function (require, exports, module) {
         }, []);
     }
 
+    /**
+     * Toggles between truncated and full length extension descriptions
+     * @param {string} id The id of the extension clicked
+     * @param {JQueryElement} $element The DOM element of the extension clicked
+     * @param {boolean} showFull true if full length description should be shown, false for shorten version.
+     */
+    function toggleDescription(id, $element, showFull) {
+        var description, linkTitle,
+            entry = extensions[id];
+
+        // Toggle between appropriate descriptions and link title,
+        // depending on if extension is installed or not
+        if (showFull) {
+            description = entry.installInfo ? entry.installInfo.metadata.description : entry.registryInfo.metadata.description;
+            linkTitle = Strings.VIEW_TRUNCATED_DESCRIPTION;
+        } else {
+            description = entry.installInfo ? entry.installInfo.metadata.shortdescription : entry.registryInfo.metadata.shortdescription;
+            linkTitle = Strings.VIEW_COMPLETE_DESCRIPTION;
+        }
+
+        $element.attr("data-toggle-desc", showFull ? "trunc-desc" : "expand-desc")
+                .attr("title", linkTitle)
+                .prev(".ext-full-description").html(description);
+    }
+
     // Listen to extension load and loadFailed events
     $(ExtensionLoader)
         .on("load", _handleExtensionLoad)
@@ -600,7 +625,7 @@ define(function (require, exports, module) {
     exports.updateExtensions        = updateExtensions;
     exports.getAvailableUpdates     = getAvailableUpdates;
     exports.cleanAvailableUpdates   = cleanAvailableUpdates;
-
+    exports.toggleDescription       = toggleDescription;
     exports.ENABLED       = ENABLED;
     exports.START_FAILED  = START_FAILED;
 
diff --git a/src/extensibility/ExtensionManagerView.js b/src/extensibility/ExtensionManagerView.js
@@ -35,7 +35,7 @@ define(function (require, exports, module) {
         InstallExtensionDialog    = require("extensibility/InstallExtensionDialog"),
         LocalizationUtils         = require("utils/LocalizationUtils"),
         itemTemplate              = require("text!htmlContent/extension-manager-view-item.html");
-    
+
     /**
      * Creates a view enabling the user to install and manage extensions. Must be initialized
      * with initialize(). When the view is closed, dispose() must be called.
@@ -110,7 +110,7 @@ define(function (require, exports, module) {
      * The individual views for each item, keyed by the extension ID.
      */
     ExtensionManagerView.prototype._itemViews = null;
-    
+
     /**
      * @private
      * Attaches our event handlers. We wait to do this until we've fully fetched the extension list.
@@ -154,6 +154,10 @@ define(function (require, exports, module) {
                     ExtensionManager.markForRemoval($target.attr("data-extension-id"), true);
                 } else if ($target.hasClass("undo-update")) {
                     ExtensionManager.removeUpdate($target.attr("data-extension-id"));
+                } else if ($target.attr("data-toggle-desc") === "expand-desc") {
+                    ExtensionManager.toggleDescription($target.attr("data-extension-id"), $target, true);
+                } else if ($target.attr("data-toggle-desc") === "trunc-desc") {
+                    ExtensionManager.toggleDescription($target.attr("data-extension-id"), $target, false);
                 }
             })
             .on("click", "button.install", function (e) {
@@ -206,7 +210,11 @@ define(function (require, exports, module) {
             // (or registry is offline). These flags *should* always be ignored in that scenario, but just in case...
             context.isCompatible = context.isCompatibleLatest = true;
         }
-        
+
+        if (info.metadata.description !== undefined) {
+            info.metadata.shortdescription = StringUtils.truncate(info.metadata.description, 200);
+        }
+
         context.isMarkedForRemoval = ExtensionManager.isMarkedForRemoval(info.metadata.name);
         context.isMarkedForUpdate = ExtensionManager.isMarkedForUpdate(info.metadata.name);
         
diff --git a/src/htmlContent/extension-manager-view-item.html b/src/htmlContent/extension-manager-view-item.html
@@ -26,21 +26,25 @@
                 {{/isCompatibleLatest}}
             {{/isCompatible}}
         {{/showInstallButton}}
-        {{metadata.description}}
-        {{^metadata.description}}
-            <p class="muted"><em>{{Strings.EXTENSION_NO_DESCRIPTION}}</em></p>
-        {{/metadata.description}}
+        <span class="ext-full-description">
+            {{#metadata.shortdescription}}
+                {{metadata.shortdescription}}
+            {{/metadata.shortdescription}}
+            {{^metadata.shortdescription}}
+                {{#metadata.description}}
+                    {{metadata.description}}
+                {{/metadata.description}}
+                {{^metadata.description}}
+                    <p class="muted"><em>{{Strings.EXTENSION_NO_DESCRIPTION}}</em></p>
+                {{/metadata.description}}
+            {{/metadata.shortdescription}}
+        </span>
+        {{#metadata.shortdescription}}
+        <a data-extension-id="{{metadata.name}}" data-toggle-desc="expand-desc" title="{{Strings.VIEW_COMPLETE_DESCRIPTION}}" href="#">...</a>
+        {{/metadata.shortdescription}}
         {{#metadata.homepage}}
             <p><a title="{{metadata.homepage}}" href="{{metadata.homepage}}">{{Strings.EXTENSION_MORE_INFO}}</a></p>
         {{/metadata.homepage}}
-        {{#metadata.keywords.length}}
-            <br/>
-            <span class="ext-keywords">{{Strings.EXTENSION_KEYWORDS}}:
-            {{#metadata.keywords}}
-                {{.}}
-            {{/metadata.keywords}}
-            </span>
-        {{/metadata.keywords.length}}
         {{#translated}}
             <br/>
             <span class="ext-translated" title="{{translatedLangs}}">{{extensionTranslated}}</span>
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -448,6 +448,8 @@ define({
     "CANCELING_INSTALL"                    : "Canceling\u2026",
     "CANCELING_HUNG"                       : "Canceling the install is taking a long time. An internal error may have occurred.",
     "INSTALL_CANCELED"                     : "Installation canceled.",
+    "VIEW_COMPLETE_DESCRIPTION"            : "View complete description",
+    "VIEW_TRUNCATED_DESCRIPTION"           : "View truncated description",
     // These must match the error codes in ExtensionsDomain.Errors.* :
     "INVALID_ZIP_FILE"                     : "The downloaded content is not a valid zip file.",
     "INVALID_PACKAGE_JSON"                 : "The package.json file is not valid (error was: {0}).",
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -972,9 +972,6 @@ a[href^="http"] {
                 .user-select(text);
                 cursor: text;
             }
-            .ext-keywords {
-                color: @tc-input-placeholder-text;
-            }
             .ext-translated {
                 color: @tc-input-placeholder-text;
             }
diff --git a/src/utils/StringUtils.js b/src/utils/StringUtils.js
@@ -198,6 +198,27 @@ define(function (require, exports, module) {
         return returnVal;
     }
     
+    /**
+     * Truncate strings to specified length.
+     * @param {string} str Text to be truncated.
+     * @param {number} len Length to which text should be limited.
+     * @return {string} Returns truncated text only if it was changed.
+     */
+    function truncate(str, len) {
+        // Truncate the description if it is too long
+        if (str.length > len) {
+            str = str.substr(0, len);
+
+            // To prevent awkward addition of ellipsis, try to truncate
+            // at the end of the last whole word
+            var lastSpaceChar = str.lastIndexOf(" ");
+            if (lastSpaceChar < len && lastSpaceChar > -1) {
+                str = str.substr(0, lastSpaceChar);
+            }
+            return str;
+        }
+    }
+
     // Define public API
     exports.format              = format;
     exports.htmlEscape          = htmlEscape;
@@ -209,4 +230,5 @@ define(function (require, exports, module) {
     exports.breakableUrl        = breakableUrl;
     exports.endsWith            = endsWith;
     exports.prettyPrintBytes    = prettyPrintBytes;
+    exports.truncate            = truncate;
 });
diff --git a/test/spec/ExtensionManager-test.js b/test/spec/ExtensionManager-test.js
@@ -770,8 +770,7 @@ define(function (require, exports, module) {
                             
                             // Simple fields
                             [item.metadata.version,
-                                item.metadata.author && item.metadata.author.name,
-                                item.metadata.description]
+                                item.metadata.author && item.metadata.author.name]
                                 .forEach(function (value) {
                                     if (value) {
                                         expect(view).toHaveText(value);
@@ -782,7 +781,7 @@ define(function (require, exports, module) {
                             }
                             
                             // Array-valued fields
-                            [item.metadata.keywords, item.metadata.categories].forEach(function (arr) {
+                            [item.metadata.categories].forEach(function (arr) {
                                 if (arr) {
                                     arr.forEach(function (value) {
                                         expect(view).toHaveText(value);
@@ -793,6 +792,33 @@ define(function (require, exports, module) {
                     });
                 });
                 
+                it("should display original description", function () {
+                    setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
+                    runs(function () {
+                        _.forEach(mockRegistry, function (item) {
+                            if (item.metadata.description) {
+                                if (StringUtils.truncate(item.metadata.description, 200) === undefined) {
+                                    expect(view).toHaveText(item.metadata.description);
+                                }
+                            }
+                        });
+                    });
+                });
+                
+                it("should display shortened description", function () {
+                    setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
+                    runs(function () {
+                        _.forEach(mockRegistry, function (item) {
+                            if (item.metadata.description) {
+                                var shortDescription = StringUtils.truncate(item.metadata.description, 200);
+                                if (shortDescription !== undefined) {
+                                    expect(view).toHaveText(shortDescription);
+                                }
+                            }
+                        });
+                    });
+                });
+                
                 it("should display owner even for installed items", function () {
                     ExtensionManager._setExtensions(JSON.parse(mockExtensionList));
                     setupViewWithMockData(ExtensionManagerViewModel.InstalledViewModel);

Original file line number	Diff line number	Diff line change
`@@ -972,9 +972,6 @@ a[href^="http"] {`
`972`	`972`	`.user-select(text);`
`973`	`973`	`cursor: text;`
`974`	`974`	`}`
`975`		`- .ext-keywords {`
`976`		`- color: @tc-input-placeholder-text;`
`977`		`- }`
`978`	`975`	`.ext-translated {`
`979`	`976`	`color: @tc-input-placeholder-text;`
`980`	`977`	`}`