diff --git a/src/extensions/default/Git/src/GutterManager.js b/src/extensions/default/Git/src/GutterManager.js
index 419dbaca8e..7c6db24df1 100644
--- a/src/extensions/default/Git/src/GutterManager.js
+++ b/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 = $("
")
- .addClass(gutterName + "-" + obj.type + " gitline-" + (obj.line + 1))
- .html(" ");
+ .addClass(gutterName + "-" + obj.type + " gitline-" + (obj.line + 1))
+ .html(" ");
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() {
diff --git a/src/extensions/default/Git/styles/git-styles.less b/src/extensions/default/Git/styles/git-styles.less
index b51edebf16..534fbc1d69 100644
--- a/src/extensions/default/Git/styles/git-styles.less
+++ b/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;