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;