Contributors List on the About Dialog

src/brackets.config.json

@@ -12,6 +12,7 @@
         "report_issue_url"  : "https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue",
         "twitter_url"       : "https://twitter.com/brackets",
         "troubleshoot_url"  : "https://github.com/adobe/brackets/wiki/Troubleshooting#wiki-livedev",
-        "twitter_name"      : "@brackets"
+        "twitter_name"      : "@brackets",
+        "contributors_url"  : "https://api.github.com/repos/adobe/brackets/contributors"
     }
 }

src/config.json

@@ -11,7 +11,8 @@
         "report_issue_url": "https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue",
         "twitter_url": "https://twitter.com/brackets",
         "troubleshoot_url": "https://github.com/adobe/brackets/wiki/Troubleshooting#wiki-livedev",
-        "twitter_name": "@brackets"
+        "twitter_name": "@brackets",
+        "contributors_url": "https://api.github.com/repos/adobe/brackets/contributors"
     },
     "name": "Brackets",
     "version": "0.21.0-0",

src/help/HelpCommandHandlers.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, window, Mustache */
+/*global define, $, brackets, window, PathUtils, Mustache */
 
 define(function (require, exports, module) {
     "use strict";
@@ -39,10 +39,32 @@ define(function (require, exports, module) {
         FileUtils               = require("file/FileUtils"),
         NativeApp               = require("utils/NativeApp"),
         StringUtils             = require("utils/StringUtils"),
-        AboutDialogTemplate     = require("text!htmlContent/about-dialog.html");
+        AboutDialogTemplate     = require("text!htmlContent/about-dialog.html"),
+        ContributorsTemplate    = require("text!htmlContent/contributors-list.html");
 
     var buildInfo;
-
+
+
+    /**
+     * @private
+     * Gets a data structure that has the information for all the contributors of Brackets.
+     * The information is fetched from brackets.config.contributors_url using the github API.
+     * @return {$.Promise} jQuery Promise object that is resolved or rejected after the information is fetched.
+     */
+    function _getContributorsInformation() {
+        var result = new $.Deferred();
+
+        $.getJSON(brackets.config.contributors_url)
+            .done(function (data) {
+                result.resolve(data);
+            }).fail(function () {
+                result.reject();
+            });
+
+        return result.promise();
+    }
+
+
     function _handleCheckForUpdates() {
         UpdateNotification.checkForUpdate(true);
     }
@@ -69,7 +91,46 @@ define(function (require, exports, module) {
             APP_NAME_ABOUT_BOX  : brackets.config.app_name_about,
             BUILD_INFO          : buildInfo || ""
         }, Strings);
+
         Dialogs.showModalDialogUsingTemplate(Mustache.render(AboutDialogTemplate, templateVars));
+
+        // Get all the project contributors and add them to the dialog
+        _getContributorsInformation().done(function (contributorsInfo) {
+
+            // Populate the contributors data
+            var $dlg = $(".about-dialog.instance");
+            var $contributors = $dlg.find(".about-contributors");
+            var totalContributors = contributorsInfo.length;
+            var contributorsCount = 0;
+
+            $contributors.html(Mustache.render(ContributorsTemplate, contributorsInfo));
+
+            // This is used to create an opacity transition when each image is loaded
+            $contributors.find("img").one("load", function () {
+                $(this).css("opacity", 1);
+
+                // Count the contributors loaded and hide the spinner once all are loaded
+                contributorsCount++;
+                if (contributorsCount >= totalContributors) {
+                    $dlg.find(".about-spinner").css("display", "none");
+                }
+            }).each(function () {
+                if (this.complete) {
+                    $(this).trigger("load");
+                }
+            });
+
+            // Create a link for each contributor image to their github account
+            $contributors.on("click", "img", function (e) {
+                var url = $(e.target).data("url");
+                if (url) {
+                    // Make sure the URL has a domain that we know about
+                    if (/(^|\.)github\.com$/i.test(PathUtils.parseUrl(url).hostname)) {
+                        NativeApp.openURLInDefaultBrowser(url);
+                    }
+                }
+            });
+        });
     }
 
     // Read "build number" SHAs off disk immediately at APP_READY, instead

src/htmlContent/about-dialog.html

@@ -6,10 +6,18 @@ <h1 class="dialog-title">{{ABOUT}}</h1>
         <img class="about-icon" src="{{ABOUT_ICON}}">
         <div class="about-text">
             <h2>{{APP_NAME_ABOUT_BOX}}</h2>
-            <p class="dialog-message">{{ABOUT_TEXT_LINE1}} <span id="about-build-number">{{BUILD_INFO}}</span></p>
-            <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 - 2013 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
-            <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
-            <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
+            <div class="about-info">
+                <p class="dialog-message">{{ABOUT_TEXT_LINE1}} <span id="about-build-number">{{BUILD_INFO}}</span></p>
+                <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 - 2013 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
+                <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
+                <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
+                <p class="dialog-message">
+                    {{ABOUT_TEXT_LINE5}}
+                    <span class="about-spinner"></span>
+                </p>
+                <div class="about-contributors">
+                </div>
+            </div>
         </div>
     </div>
     <div class="modal-footer">

src/htmlContent/contributors-list.html

@@ -0,0 +1,3 @@
+{{#.}}
+<img class="clickable-link" data-url="{{html_url}}" src="{{avatar_url}}" title="{{login}}" alt="{{login}}" width="30" height="30" /> 
+{{/.}}

src/nls/root/strings.js

@@ -278,6 +278,7 @@ define({
     "ABOUT_TEXT_LINE1"                     : "sprint {VERSION_MINOR} {BUILD_TYPE} {VERSION}",
     "ABOUT_TEXT_LINE3"                     : "Notices, terms and conditions pertaining to third party software are located at <a class=\"clickable-link\" data-href=\"http://www.adobe.com/go/thirdparty/\">http://www.adobe.com/go/thirdparty/</a> and incorporated by reference herein.",
     "ABOUT_TEXT_LINE4"                     : "Documentation and source at <a class=\"clickable-link\" data-href=\"https://github.com/adobe/brackets/\">https://github.com/adobe/brackets/</a>",
+    "ABOUT_TEXT_LINE5"                     : "Made with \u2764 and JavaScript by:",
     "UPDATE_NOTIFICATION_TOOLTIP"          : "There's a new build of {APP_NAME} available! Click here for details.",
     "UPDATE_AVAILABLE_TITLE"               : "Update Available",
     "UPDATE_MESSAGE"                       : "Hey, there's a new build of {APP_NAME} available. Here are some of the new features:",

src/styles/brackets_patterns_override.less

@@ -442,6 +442,29 @@
         #about-build-number {
             color: #b0b0b0;
         }
+        .about-info {
+            max-height: 300px;
+            overflow: auto;
+        }
+        .about-contributors {
+            min-height: 100px;
+        }
+        .about-contributors img {
+            opacity: 0;
+            -webkit-transition: opacity 1s;
+            -moz-transition: opacity 1s;
+            -o-transition: opacity 1s;
+            transition: opacity 1s;
+        }
+        .about-spinner {
+            display: inline-block;
+            vertical-align: middle;
+            margin-top: -2px;
+            width: 12px;
+            height: 12px;
+            background: url("images/small_spinner.svg") no-repeat;
+            -webkit-animation: rotating 1.5s linear infinite;
+        }
     }
 
     h2 {