feat: git scroll bar markers

Author: abose

src/extensions/default/Git/src/GutterManager.js

@@ -8,6 +8,7 @@ define(function (require, exports) {
         CommandManager  = brackets.getModule("command/CommandManager"),
         DocumentManager = brackets.getModule("document/DocumentManager"),
         EditorManager   = brackets.getModule("editor/EditorManager"),
+        ScrollTrackMarkers  = brackets.getModule("search/ScrollTrackMarkers"),
         MainViewManager = brackets.getModule("view/MainViewManager"),
         ErrorHandler    = require("src/ErrorHandler"),
         Events          = require("src/Events"),
@@ -16,6 +17,8 @@ define(function (require, exports) {
         Preferences     = require("./Preferences"),
         Strings             = brackets.getModule("strings");
 
+    const GIT_SCROLL_MARKS = "git_marks";
+
     var gitAvailable = false,
         gutterName = "brackets-git-gutter",
         editorsWithGutters = [],
@@ -125,7 +128,7 @@ define(function (require, exports) {
         }
     }
 
-    function showGutters(editor, _results) {
+    function _showGutters(editor, _results) {
         prepareGutter(editor);
 
         var cm = editor._codeMirror;
@@ -137,8 +140,8 @@ define(function (require, exports) {
         cm.clearGutter(gutterName);
         cm.gitGutters.forEach(function (obj) {
             var $marker = $("<div>")
-                            .addClass(gutterName + "-" + obj.type + " gitline-" + (obj.line + 1))
-                            .html("&nbsp;");
+                .addClass(gutterName + "-" + obj.type + " gitline-" + (obj.line + 1))
+                .html("&nbsp;");
             cm.setGutterMarker(obj.line, gutterName, $marker[0]);
         });
         _cursorActivity(null, editor);
@@ -214,6 +217,48 @@ define(function (require, exports) {
         return doc && doc._masterEditor;
     }
 
+    function hasVerticalScrollbar(editor) {
+        const cm = editor._codeMirror;
+        const scrollEl = cm.getScrollerElement();
+        return scrollEl.scrollHeight > scrollEl.clientHeight;
+    }
+
+
+    function _markScrollbar(editor, allChanges) {
+        ScrollTrackMarkers.clear(editor, GIT_SCROLL_MARKS);
+        if(!hasVerticalScrollbar(editor)){
+            return;
+        }
+        const added = allChanges
+            .filter(item => item.type === "added")
+            .map(({ line }) => ({ line, ch: 0 }));
+
+        const removed = allChanges
+            .filter(item => item.type === "removed")
+            .map(({ line }) => ({ line, ch: 0 }));
+
+        const modified = allChanges
+            .filter(item => item.type === "modified")
+            .map(({ line }) => ({ line, ch: 0 }));
+
+        const trackers = [
+            {arr: added, css: "brackets-git-added"},
+            {arr: removed, css: "brackets-git-removed"},
+            {arr: modified, css: "brackets-git-modified"}
+        ];
+        for(let tracker of trackers) {
+            if( !tracker.arr.length ){
+                continue;
+            }
+            let posArray = tracker.arr.map(item => ({ line: item.line, ch: 0 }));
+            ScrollTrackMarkers.addTickmarks(editor, posArray, {
+                trackStyle: ScrollTrackMarkers.TRACK_STYLES.ON_LEFT,
+                name: GIT_SCROLL_MARKS,
+                cssColorClass: tracker.css
+            });
+        }
+    }
+
     function processDiffResults(editor, diff) {
         var added = [],
             removed = [],
@@ -239,9 +284,9 @@ define(function (require, exports) {
                     type: "removed",
                     line: lineRemovedFrom,
                     content: str.split("\n")
-                                .filter(function (l) { return l.indexOf("-") === 0; })
-                                .map(function (l) { return l.substring(1); })
-                                .join("\n")
+                        .filter(function (l) { return l.indexOf("-") === 0; })
+                        .map(function (l) { return l.substring(1); })
+                        .join("\n")
                 });
             }
 
@@ -279,7 +324,9 @@ define(function (require, exports) {
             o.line = o.line + 1;
         });
 
-        showGutters(editor, [].concat(added, removed, modified));
+        const allChanges = [].concat(added, removed, modified);
+        _showGutters(editor, allChanges);
+        _markScrollbar(editor, allChanges);
     }
 
     function refresh() {

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

@@ -292,6 +292,29 @@
 // codemirror
 // main: brackets-git.less
 
+.tickmark-track {
+    .brackets-git-added {
+        --mark-color: @git-green;
+        .dark & {
+            --mark-color: @dark-git-green;
+        }
+    }
+
+    .brackets-git-modified {
+        --mark-color: @git-orange;
+        .dark & {
+            --mark-color: @dark-git-orange;
+        }
+    }
+
+    .brackets-git-removed {
+        --mark-color: @git-red;
+        .dark & {
+            --mark-color: @dark-git-red;
+        }
+    }
+}
+
 .CodeMirror {
     .brackets-git-gutter {
         pointer-events: auto;