feat: add branch name in the git panel toolbar

Author: devvaannsh

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

@@ -426,6 +426,7 @@ define(function (require, exports) {
             .text("\u2026")
             .parent()
                 .show();
+        Panel.setBranchName("\u2026", "");
 
         return Git.getGitRoot().then(function (gitRoot) {
             var projectRoot             = Utils.getProjectRoot(),
@@ -440,6 +441,7 @@ define(function (require, exports) {
                 $gitBranchName
                     .off("click")
                     .text("not a git repo");
+                Panel.setBranchName("not a git repo", "");
                 Panel.disable("not-repo");
 
                 return;
@@ -482,6 +484,7 @@ define(function (require, exports) {
                         .attr("title", tooltip)
                         .off("click")
                         .on("click", toggleDropdown);
+                    Panel.setBranchName(branchName, tooltip);
                     Panel.enable();
 
                 }).catch(function (err) {
@@ -493,6 +496,7 @@ define(function (require, exports) {
                     $gitBranchName
                         .off("click")
                         .text("no branch");
+                    Panel.setBranchName("no branch", "");
                     Panel.enable();
                 } else {
                     throw ex;

src/extensions/default/Git/src/Panel.js

@@ -852,6 +852,19 @@ define(function (require, exports) {
         }
     }
 
+    const BRANCH_MAX_LEN = 18;
+
+    // called by Branch.refresh() so the panel indicator always mirrors the sidebar one,
+    // including merge/rebase decorations like "main|MERGING"
+    function setBranchName(branchName, tooltip) {
+        const displayName = branchName.length > BRANCH_MAX_LEN
+            ? branchName.substring(0, BRANCH_MAX_LEN) + "\u2026"
+            : branchName;
+        const $branch = $gitPanel.find(".git-panel-branch");
+        $branch.attr("title", tooltip || "");
+        $branch.find(".git-branch-name").text(displayName);
+    }
+
     function refreshCommitCounts() {
         // Find Push and Pull buttons
         var $pullBtn = $gitPanel.find(".git-pull");
@@ -1601,6 +1614,7 @@ define(function (require, exports) {
     exports.toggle = toggle;
     exports.enable = enable;
     exports.disable = disable;
+    exports.setBranchName = setBranchName;
     exports.getSelectedHistoryCommit = getSelectedHistoryCommit;
     exports.getPanel = function () { return $gitPanel; };
 

src/extensions/default/Git/styles/git-styles.less

@@ -1088,6 +1088,21 @@
         right: 32px;
         top: 5px;
     }
+    .git-panel-branch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        font-size: 12px;
+        white-space: nowrap;
+        cursor: default;
+        opacity: .7;
+        .dark & {
+            opacity: .6;
+        }
+        i {
+            margin-right: 4px;
+        }
+    }
     .octicon:not(:only-child) {
         margin-right: 5px;
         vertical-align: -1px;

src/extensions/default/Git/templates/git-panel.html

@@ -57,6 +57,9 @@
         </div>
         <!-- on right -->
         <div class="git-right-icons hide-when-small">
+            <div class="git-panel-branch git-available">
+                <i class="fas fa-code-branch"></i><span class="git-branch-name"></span>
+            </div>
             <div class="btn-group git-available dropup">
                 <ul class="dropdown-menu git-remotes-dropdown"></ul>
                 <button type="button" class="git-remotes btn small dropdown-toggle" data-toggle="dropdown" title="{{S.TOOLTIP_PICK_REMOTE}}">