Feat: Improved git support - git panel

docs/API-Reference/command/Commands.md

@@ -986,6 +986,12 @@ Opens git settings
 ## CMD\_GIT\_CLOSE\_UNMODIFIED
 Closes unmodified files
 
+**Kind**: global variable
+<a name="CMD_GIT_OPEN_CHANGED_FILES"></a>
+
+## CMD\_GIT\_OPEN\_CHANGED\_FILES
+Opens all modified/untracked files
+
 **Kind**: global variable  
 <a name="CMD_GIT_CHECKOUT"></a>
 

src/command/Commands.js

@@ -537,6 +537,9 @@ define(function (require, exports, module) {
     /** Closes unmodified files */
     exports.CMD_GIT_CLOSE_UNMODIFIED = "git-close-unmodified-files";
 
+    /** Opens all modified/untracked files */
+    exports.CMD_GIT_OPEN_CHANGED_FILES = "git-open-changed-files";
+
     /** Checks out a branch or commit */
     exports.CMD_GIT_CHECKOUT = "git-checkout";
 

src/extensions/default/Git/main.js

@@ -40,10 +40,19 @@
     }
 
     AppInit.appReady(function () {
-        Main.init().then((enabled)=>{
-            if(!enabled) {
-                BracketsEvents.disableAll();
-            }
+        function initMain() {
+            Main.init().then((enabled)=>{
+                if(!enabled) {
+                    BracketsEvents.disableAll();
+                }
+            });
+        }
+        // Main.init emits events like GIT_ENABLED that the modules above listen
+        // for. They load asynchronously, so init must wait for them or events
+        // fired before they finish loading are lost (Eg. empty remotes picker).
+        require(modules, initMain, function (err) {
+            console.error("Git modules failed to load, initializing git anyway", err);
+            initMain();
         });
     });
 

src/extensions/default/Git/src/Branch.js

@@ -32,6 +32,10 @@
         currentEditor,
         $dropdown;
 
+    let lastRenderedBranchName = null;
+    let lastRenderedProjectRoot = null;
+    let $dropdownAnchor = null;
+
     function renderList(branches) {
         branches = branches.map(function (name) {
             return {
@@ -303,7 +307,9 @@
     function attachCloseEvents() {
         $("html").on("click", closeDropdown);
         $("#project-files-container").on("scroll", closeDropdown);
+        $("#git-panel .table-container").on("scroll", closeDropdown);
         $("#titlebar .nav").on("click", closeDropdown);
+        $("#git-panel .git-remotes").on("click", closeDropdown);
 
         currentEditor = EditorManager.getCurrentFullEditor();
         if (currentEditor) {
@@ -316,7 +322,9 @@
     function detachCloseEvents() {
         $("html").off("click", closeDropdown);
         $("#project-files-container").off("scroll", closeDropdown);
+        $("#git-panel .table-container").off("scroll", closeDropdown);
         $("#titlebar .nav").off("click", closeDropdown);
+        $("#git-panel .git-remotes").off("click", closeDropdown);
 
         if (currentEditor) {
             currentEditor._codeMirror.off("focus", closeDropdown);
@@ -325,22 +333,85 @@
         // $(window).off("keydown", keydownHook);
 
         $dropdown = null;
+        $dropdownAnchor = null;
+    }
+
+    function _positionDropdownBelow($toggle) {
+        // two margins to account for the preceding project dropdown as well
+        const marginLeft = (parseInt($toggle.css("margin-left"), 10) * 2) || 0;
+
+        const toggleOffset = $toggle.offset();
+
+        $dropdown
+            .css({
+                left: toggleOffset.left - marginLeft + 3,
+                top: toggleOffset.top + $toggle.outerHeight() - 3
+            })
+            .appendTo($("body"));
+
+        // fix so it doesn't overflow the screen
+        const maxHeight = $dropdown.parent().height(),
+            height = $dropdown.height(),
+            topOffset = $dropdown.position().top;
+        if (height + topOffset >= maxHeight - 10) {
+            $dropdown.css("bottom", "10px");
+        }
+    }
+
+    function _positionDropdownAbove($anchor) {
+        const anchorOffset = $anchor.offset();
+
+        $dropdown
+            .css({
+                left: anchorOffset.left,
+                // #git-branch-dropdown carries a negative margin-left meant for the
+                // sidebar toggle alignment, neutralize it so left matches the anchor
+                "margin-left": 0,
+                // the .dropdown-menu class positions with "top: 100%", it has to be
+                // explicitly overridden or the bottom positioning below is over-constrained
+                top: "auto",
+                bottom: $(window).height() - anchorOffset.top + 3,
+                // grow upwards from the anchor instead of the default top-left origin
+                "transform-origin": "0 100%"
+            })
+            .appendTo($("body"));
+
+        // fix so it doesn't overflow the screen
+        if ($dropdown.height() >= anchorOffset.top - 10) {
+            $dropdown.css("top", "10px");
+        }
+
+        const rightOverflow = $dropdown.offset().left + $dropdown.outerWidth() - ($(window).width() - 10);
+        if (rightOverflow > 0) {
+            $dropdown.css("left", anchorOffset.left - rightOverflow);
+        }
     }
 
     function toggleDropdown(e) {
         e.stopPropagation();
+        $("#git-panel .btn-group.open").removeClass("open");
+        // currentTarget is only valid while the event is being dispatched,
+        // so it has to be captured before the async branch listing below
+        const $anchor = $(e.currentTarget);
 
-        // If the dropdown is already visible, close it
+        // clicking the anchor that opened the dropdown closes it, clicking the
+        // other anchor moves the dropdown there
         if ($dropdown) {
+            const sameAnchor = $dropdownAnchor && $dropdownAnchor[0] === $anchor[0];
             closeDropdown();
-            return;
+            if (sameAnchor) {
+                return;
+            }
         }
 
         Menus.closeAll();
 
         Git.getBranches().catch(function (err) {
             ErrorHandler.showError(err, Strings.ERROR_GETTING_BRANCH_LIST);
         }).then(function (branches = []) {
+            if ($dropdown) {
+                return;
+            }
             branches = branches.reduce(function (arr, branch) {
                 if (!branch.currentBranch && !branch.remote) {
                     arr.push(branch.name);
@@ -349,25 +420,12 @@
             }, []);
 
             $dropdown = $(renderList(branches));
-            const $toggle = $("#git-branch-dropdown-toggle");
-            // two margins to account for the preceding project dropdown as well
-            const marginLeft = (parseInt($toggle.css("margin-left"), 10) * 2) || 0;
-
-            const toggleOffset = $toggle.offset();
-
-            $dropdown
-                .css({
-                    left: toggleOffset.left - marginLeft + 3,
-                    top: toggleOffset.top + $toggle.outerHeight() - 3
-                })
-                .appendTo($("body"));
-
-            // fix so it doesn't overflow the screen
-            var maxHeight = $dropdown.parent().height(),
-                height = $dropdown.height(),
-                topOffset = $dropdown.position().top;
-            if (height + topOffset >= maxHeight - 10) {
-                $dropdown.css("bottom", "10px");
+            $dropdownAnchor = $anchor;
+            if ($anchor.closest("#git-panel").length) {
+                // the git panel sits at the bottom of the screen, open upwards from there
+                _positionDropdownAbove($anchor);
+            } else {
+                _positionDropdownBelow($("#git-branch-dropdown-toggle"));
             }
 
             PopUpManager.addPopUp($dropdown, detachCloseEvents, true, {closeCurrentPopups: true});
@@ -409,10 +467,9 @@
                 return;
             }
 
-            var branchInHead  = m[1],
-                branchInUi    = $gitBranchName.text();
+            const branchInHead = m[1];
 
-            if (branchInHead !== branchInUi) {
+            if (branchInHead !== lastRenderedBranchName) {
                 refresh();
             }
         });
@@ -421,25 +478,35 @@
     function refresh() {
         if ($gitBranchName.length === 0) { return; }
 
-        // show info that branch is refreshing currently
-        $gitBranchName
-            .text("\u2026")
-            .parent()
-                .show();
+        const projectRoot = Utils.getProjectRoot();
+        function isStale() {
+            return Utils.getProjectRoot() !== projectRoot;
+        }
+
+        // show the loading placeholder only when the displayed name can't be
+        // trusted (first refresh or project switch), else keep it to avoid flicker
+        if (projectRoot !== lastRenderedProjectRoot) {
+            $gitBranchName.text("\u2026");
+            Panel.setBranchName("\u2026", "");
+        }
 
         return Git.getGitRoot().then(function (gitRoot) {
-            var projectRoot             = Utils.getProjectRoot(),
-                isRepositoryRootOrChild = gitRoot && projectRoot.indexOf(gitRoot) === 0;
+            if (isStale()) { return; }
+            var isRepositoryRootOrChild = gitRoot && projectRoot.indexOf(gitRoot) === 0;
 
             $gitBranchName.parent().toggle(isRepositoryRootOrChild);
 
             if (!isRepositoryRootOrChild) {
                 Preferences.set("currentGitRoot", projectRoot);
                 Preferences.set("currentGitSubfolder", "");
 
+                lastRenderedBranchName = null;
+                lastRenderedProjectRoot = projectRoot;
                 $gitBranchName
                     .off("click")
-                    .text("not a git repo");
+                    .text(Strings.GIT_NOT_A_REPO);
+                Panel.setBranchName(Strings.GIT_NOT_A_REPO, "");
+                $("#git-panel .git-panel-branch").removeClass("clickable").off("click");
                 Panel.disable("not-repo");
 
                 return;
@@ -454,6 +521,7 @@
             return Git.getCurrentBranchName().then(function (branchName) {
 
                 Git.getMergeInfo().then(function (mergeInfo) {
+                    if (isStale()) { return; }
 
                     if (mergeInfo.mergeMode) {
                         branchName += "|MERGING";
@@ -471,28 +539,47 @@
 
                     EventEmitter.emit(Events.REBASE_MERGE_MODE, mergeInfo.rebaseMode, mergeInfo.mergeMode);
 
-                    var MAX_LEN = 18;
-
-                    const tooltip = StringUtils.format(Strings.ON_BRANCH, branchName);
-                    const html = `<i class="fas fa-code-branch"></i> ${
-                        branchName.length > MAX_LEN ? branchName.substring(0, MAX_LEN) + "\u2026" : branchName
-                    }`;
-                    $gitBranchName
-                        .html(html)
-                        .attr("title", tooltip)
-                        .off("click")
-                        .on("click", toggleDropdown);
+                    const MAX_LEN = 18;
+
+                    const changed = branchName !== lastRenderedBranchName ||
+                        projectRoot !== lastRenderedProjectRoot;
+                    lastRenderedBranchName = branchName;
+                    lastRenderedProjectRoot = projectRoot;
+                    if (changed) {
+                        const tooltip = StringUtils.format(Strings.ON_BRANCH, branchName);
+                        const displayName = branchName.length > MAX_LEN
+                            ? branchName.substring(0, MAX_LEN) + "\u2026"
+                            : branchName;
+                        // branch names may contain characters like "<", so set them
+                        // as text and never as html
+                        $gitBranchName
+                            .text(" " + displayName)
+                            .prepend('<i class="fas fa-code-branch"></i>')
+                            .attr("title", tooltip)
+                            .off("click")
+                            .on("click", toggleDropdown);
+                        Panel.setBranchName(displayName, tooltip);
+                        $("#git-panel .git-panel-branch")
+                            .addClass("clickable")
+                            .off("click")
+                            .on("click", toggleDropdown);
+                    }
                     Panel.enable();
 
                 }).catch(function (err) {
                     ErrorHandler.showError(err, Strings.ERROR_READING_GIT_STATE);
                 });
 
             }).catch(function (ex) {
+                if (isStale()) { return; }
                 if (ErrorHandler.contains(ex, "unknown revision")) {
+                    lastRenderedBranchName = null;
+                    lastRenderedProjectRoot = projectRoot;
                     $gitBranchName
                         .off("click")
-                        .text("no branch");
+                        .text(Strings.GIT_NO_BRANCH);
+                    Panel.setBranchName(Strings.GIT_NO_BRANCH, "");
+                    $("#git-panel .git-panel-branch").removeClass("clickable").off("click");
                     Panel.enable();
                 } else {
                     throw ex;
@@ -544,6 +631,10 @@
         refresh();
     });
 
+    EventEmitter.on(Events.GIT_PANEL_SHOWN, function () {
+        refresh();
+    });
+
     EventEmitter.on(Events.GIT_ENABLED, function () {
         $("#git-branch-dropdown-toggle").removeClass("forced-inVisible");
     });

src/extensions/default/Git/src/Constants.js

@@ -36,6 +36,7 @@ define(function (require, exports) {
     exports.CMD_GIT_CLONE_WITH_URL = Commands.CMD_GIT_CLONE_WITH_URL;
     exports.CMD_GIT_SETTINGS_COMMAND_ID = Commands.CMD_GIT_SETTINGS_COMMAND_ID;
     exports.CMD_GIT_CLOSE_UNMODIFIED = Commands.CMD_GIT_CLOSE_UNMODIFIED;
+    exports.CMD_GIT_OPEN_CHANGED_FILES = Commands.CMD_GIT_OPEN_CHANGED_FILES;
     exports.CMD_GIT_CHECKOUT = Commands.CMD_GIT_CHECKOUT;
     exports.CMD_GIT_RESET_HARD = Commands.CMD_GIT_RESET_HARD;
     exports.CMD_GIT_RESET_SOFT = Commands.CMD_GIT_RESET_SOFT;

src/extensions/default/Git/src/Events.js

@@ -46,6 +46,7 @@ define(function (require, exports) {
     exports.HISTORY_SHOW_GLOBAL = "history_showGlobal";
     exports.REFRESH_COUNTERS = "refresh_counters";
     exports.REFRESH_HISTORY = "refresh_history";
+    exports.GIT_PANEL_SHOWN = "git_panel_shown";
 
     // Git results
     exports.GIT_STATUS_RESULTS = "git_status_results";