Add Status bar Indicator for Overwrite mode

src/editor/Editor.js

@@ -710,6 +710,9 @@ define(function (require, exports, module) {
         this._codeMirror.on("update", function (instance) {
             $(self).triggerHandler("update", [self]);
         });
+        this._codeMirror.on("overwriteToggle", function (instance, newstate) {
+            $(self).triggerHandler("overwriteToggle", [self, newstate]);
+        });
     };
 
     /**
@@ -920,6 +923,15 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * Sets or toggles the editors overwrite mode.
+     *
+     * @param {!boolean} start
+     */
+    Editor.prototype.toggleOverwrite = function (state) {
+        this._codeMirror.toggleOverwrite(state);
+    };
+
     /**
      * Selects word that the given pos lies within or adjacent to. If pos isn't touching a word
      * (e.g. within a token like "//"), moves the cursor to pos without selecting a range.

src/editor/EditorStatusBar.js

@@ -33,6 +33,7 @@ define(function (require, exports, module) {
 
     // Load dependent modules
     var AppInit             = require("utils/AppInit"),
+        AnimationUtils      = require("utils/AnimationUtils"),
         EditorManager       = require("editor/EditorManager"),
         Editor              = require("editor/Editor").Editor,
         KeyEvent            = require("utils/KeyEvent"),
@@ -46,7 +47,8 @@ define(function (require, exports, module) {
         $fileInfo,
         $indentType,
         $indentWidthLabel,
-        $indentWidthInput;
+        $indentWidthInput,
+        $statusOverwrite;
 
 
     function _formatCountable(number, singularStr, pluralStr) {
@@ -141,6 +143,22 @@ define(function (require, exports, module) {
         _updateCursorInfo();
     }
 
+    function _updateOverwriteLabel(event, editor, newstate) {
+        if (!newstate) {
+            $statusOverwrite.text(Strings.STATUSBAR_INSERT);
+        } else {
+            $statusOverwrite.text(Strings.STATUSBAR_OVERWRITE);
+        }
+
+        AnimationUtils.animateUsingClass($statusOverwrite[0], "active");
+    }
+
+    function _updateEditorOverwriteMode() {
+        var editor = EditorManager.getActiveEditor();
+
+        editor.toggleOverwrite(null);
+    }
+
     function _onActiveEditorChange(event, current, previous) {
         if (previous) {
             $(previous).off(".statusbar");
@@ -151,6 +169,7 @@ define(function (require, exports, module) {
         if (!current) {
             StatusBar.hide();  // calls resizeEditor() if needed
         } else {
+            current.toggleOverwrite($statusOverwrite.text() === Strings.STATUSBAR_OVERWRITE);
             StatusBar.show();  // calls resizeEditor() if needed
 
             $(current).on("cursorActivity.statusbar", _updateCursorInfo);
@@ -162,6 +181,7 @@ define(function (require, exports, module) {
                 // async update to keep typing speed smooth
                 window.setTimeout(function () { _updateFileInfo(current); }, 0);
             });
+            $(current).on("overwriteToggle.statusbar", _updateOverwriteLabel);
 
             current.document.addRef();
             $(current.document).on("languageChanged.statusbar", function () { _updateLanguageInfo(current); });
@@ -181,6 +201,7 @@ define(function (require, exports, module) {
         $indentType         = $("#indent-type");
         $indentWidthLabel   = $("#indent-width-label");
         $indentWidthInput   = $("#indent-width-input");
+        $statusOverwrite    = $("#status-overwrite");
 
         // indentation event handlers
         $indentType.on("click", _toggleIndentType);
@@ -208,6 +229,8 @@ define(function (require, exports, module) {
 
         $indentWidthInput.focus(function () { $indentWidthInput.select(); });
 
+        $statusOverwrite.on("click", _updateEditorOverwriteMode);
+
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
     }
 

src/nls/root/strings.js

@@ -198,6 +198,8 @@ define({
     "STATUSBAR_LINE_COUNT_SINGULAR"         : "\u2014 {0} Line",
     "STATUSBAR_LINE_COUNT_PLURAL"           : "\u2014 {0} Lines",
     "STATUSBAR_USER_EXTENSIONS_DISABLED"    : "Extensions Disabled",
+    "STATUSBAR_INSERT"                      : "INS",
+    "STATUSBAR_OVERWRITE"                   : "OVR",
 
     // CodeInspection: errors/warnings
     "ERRORS_PANEL_TITLE_MULTIPLE"           : "{0} Problems",

src/styles/brackets.less

@@ -224,6 +224,18 @@ a, img {
     margin: 0;
 }
 
+#status-overwrite {
+    transition: background-color 3s;
+    background-color: rgba(120, 178, 242, 0);
+    color: rgb(69, 69, 69);
+}
+
+#status-overwrite.active {
+    transition: background-color 1s;
+    background-color: rgb(120, 178, 242);
+}
+
+
 #editor-holder {
     position: relative;
 

src/widgets/StatusBar.html

@@ -8,8 +8,9 @@
             <div id="indent-type"></div>
             <div id="indent-width-label"></div>
             <input id="indent-width-input" type="number" min="1" max="10" maxlength="2" size="2" class="hidden">
-        </div>        
+        </div>
         <div id="status-language"></div>
+        <div id="status-overwrite">{{STATUSBAR_INSERT}}</div>
         <div class="spinner"></div>
     </div>
 </div>