fix: cursor not seen if line is empty and no git gutter marker in line in git projects

This was caused by fractional .7em rendering of git gutter. The css pixel approximation will hide
the 1px cursor line in certain window widths, so we should not use fractional em in the gutter.
if was to use a 1em gutter and set a fractional em inset border so that gutter width not fractional

also added hover style so that when user hovers over 1em gutter, it expands to 2 em to have
the user not work with needle threading precision to click git gutter. the green git-added-lines
gutter will not expand as there is currently no action associated with it.

Author: abose

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -588,7 +588,7 @@ define(function (require, exports, module) {
 
         // reload the page if the given document is a JS file related
         // to the current live document.
-        if (_liveDocument.isRelated(absolutePath)) {
+        if (_liveDocument.isRelated && _liveDocument.isRelated(absolutePath)) {
             if (doc.getLanguage().getId() === "javascript") {
                 _setStatus(STATUS_RELOADING);
                 _protocol.reload();
@@ -610,7 +610,7 @@ define(function (require, exports, module) {
 
         var absolutePath = doc.file.fullPath;
 
-        if (_liveDocument.isRelated(absolutePath)) {
+        if (_liveDocument.isRelated && _liveDocument.isRelated(absolutePath)) {
             // Set status to out of sync if dirty. Otherwise, set it to active status.
             _setStatus(_docIsOutOfSync(doc) ? STATUS_OUT_OF_SYNC : STATUS_ACTIVE);
         }

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

@@ -21,6 +21,45 @@ define(function (require, exports) {
         editorsWithGutters = [],
         openWidgets = [];
 
+    /**
+     * Checks if there's already a gutter marker on the given line;
+     * if not, inserts a blank <div> to prevent an empty gutter spot.
+     */
+    function _addDummyGutterMarkerIfNotExist(cm, line) {
+        var lineInfo = cm.lineInfo(line);
+        if (!lineInfo) {
+            return; // If line is out of range or doc is empty
+        }
+        var gutters = cm.getOption("gutters").slice(0),
+            gutterEnabled = gutters.indexOf(gutterName);
+        if(gutterEnabled === -1){
+            return;
+        }
+        var gutterMarkers = lineInfo.gutterMarkers;
+        var existingMarker = gutterMarkers && gutterMarkers[gutterName];
+        if (!existingMarker) {
+            var dummy = document.createElement("div");
+            dummy.className = "CodeMirror-gitGutter-none";
+            cm.setGutterMarker(line, gutterName, dummy);
+        }
+    }
+
+    function _cursorActivity(_evt, editor){
+        // this is to prevent a gutter gap in the active line if there is no color on this line.
+        _addDummyGutterMarkerIfNotExist(editor._codeMirror, editor.getCursorPos().line);
+    }
+
+    EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) {
+        if(newEditor){
+            newEditor.off("cursorActivity.gitGutter");
+            newEditor.on("cursorActivity.gitGutter", _cursorActivity);
+            _cursorActivity(null, newEditor);
+        }
+        if(oldEditor){
+            oldEditor.off("cursorActivity.gitGutter");
+        }
+    });
+
     function clearWidgets() {
         var lines = openWidgets.map(function (mark) {
             var w = mark.lineWidget;
@@ -102,7 +141,7 @@ define(function (require, exports) {
                             .html("&nbsp;");
             cm.setGutterMarker(obj.line, gutterName, $marker[0]);
         });
-
+        _cursorActivity(null, editor);
         // reopen widgets that were opened before refresh
         openBefore.forEach(function (obj) {
             gutterClick(obj.cm, obj.line, gutterName);
@@ -373,7 +412,18 @@ define(function (require, exports) {
         }
     });
 
+    function init() {
+        const editor = EditorManager.getActiveEditor();
+        if(!editor){
+            return;
+        }
+        editor.off("cursorActivity.gitGutter");
+        editor.on("cursorActivity.gitGutter", _cursorActivity);
+        _cursorActivity(null, editor);
+    }
+
     // API
+    exports.init = init;
     exports.goToPrev = goToPrev;
     exports.goToNext = goToNext;
 });

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

@@ -1083,7 +1083,7 @@ define(function (require, exports) {
                 if ($this.attr("x-status") === Git.FILE_STATUS.DELETED) {
                     return;
                 }
-                FileViewController.addToWorkingSetAndSelect(Preferences.get("currentGitRoot") + $this.attr("x-file"));
+                FileViewController.openFileAndAddToWorkingSet(Preferences.get("currentGitRoot") + $this.attr("x-file"));
             });
 
     }
@@ -1316,6 +1316,7 @@ define(function (require, exports) {
             toggle(true);
         }
         _panelResized();
+        GutterManager.init();
     } // function init() {
 
     function enable() {

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

@@ -3,11 +3,14 @@
 // common
 @git-moreDarkGrey:               #868888;
 @git-green:                      #91CC41;
+@dark-git-green:                 #78A336;
 @git-red:                        #F74687;
+@dark-git-red:                   #D03A6F;
 @git-red-text:                   #F74687;
 @git-blue-text:                  #1976DD;
 @git-dark-blue-text:             #51c0ff;
 @git-orange:                     #E3B551;
+@dark-git-orange:                #C29844;
 @git-orange-text:                #e28200;
 
 // Diff colors ('d' for 'dark', `l` for "light")
@@ -291,41 +294,58 @@
 
 .CodeMirror {
     .brackets-git-gutter {
+        pointer-events: auto;
         width: @gutterWidth;
-        margin-left: 1px;
     }
     .brackets-git-gutter-added,
     .brackets-git-gutter-modified,
     .brackets-git-gutter-removed {
+        pointer-events: auto;
         background-size: @gutterWidth @gutterWidth;
         background-repeat: no-repeat;
-        font-size: 1em;
-        font-weight: bold;
         color: @bc-menu-bg;
 
+        border-left: 0.4em solid transparent;
+        transition: border-left-width 0.2s ease;
         .dark & {
             color: @dark-bc-menu-bg;
+            border-left-width: 0.3em;
         }
     }
     .brackets-git-gutter-added {
-        background-color: @git-green;
+        border-left-color: @git-green;
+        .dark & {
+            border-left-color: @dark-git-green;
+        }
     }
 
     .brackets-git-gutter-modified {
-        background-color: @git-orange;
+        border-left-color: @git-orange;
+        &:hover {
+            border-left-width: 2em;
+        }
+        .dark & {
+            border-left-color: @dark-git-orange;
+        }
     }
 
     .brackets-git-gutter-removed {
-        background-color: @git-red;
+        border-left-color: @git-red;
+        &:hover {
+            border-left-width: 2em;
+        }
+        .dark & {
+            border-left-color: @dark-git-red;
+        }
     }
 
     .brackets-git-gutter-deleted-lines {
         color: @bc-text;
-        background-color: lighten(@git-red, 25%);
+        border-left-color: lighten(@git-red, 25%);
         .selectable-text();
 
         .dark & {
-            background-color: darken(@git-red, 25%);
+            border-left-color: darken(@dark-git-red, 25%);
             color: @dark-bc-text;
         }
 
@@ -338,6 +358,10 @@
             height: 1.2em;
             line-height: 0.5em;
         }
+
+        &:hover {
+            border-left-width: 1em;
+        }
     }
 }
 
@@ -814,7 +838,7 @@
 
 // main
 
-@gutterWidth: 0.65em; // using ems so that it'll be scalable on cmd +/-
+@gutterWidth: 1em; // using ems so that it'll be scalable on cmd +/-
 
 #editor-holder {
     .git.spinner {