Provide editor options "line numbers", "active line" and "word wrap" as new menu items under View menu.

Author: RaymondLim

src/brackets.js

@@ -99,6 +99,7 @@ define(function (require, exports, module) {
     require("command/DefaultMenus");
     require("document/ChangedDocumentTracker");
     require("editor/EditorCommandHandlers");
+    require("editor/EditorOptionHandlers");
     require("view/ViewCommandHandlers");
     require("help/HelpCommandHandlers");
     require("search/FindInFiles");

src/command/Commands.js

@@ -78,6 +78,9 @@ define(function (require, exports, module) {
     exports.VIEW_INCREASE_FONT_SIZE     = "view.increaseFontSize";
     exports.VIEW_DECREASE_FONT_SIZE     = "view.decreaseFontSize";
     exports.VIEW_RESTORE_FONT_SIZE      = "view.restoreFontSize";
+    exports.TOGGLE_LINE_NUMBERS         = "view.toggleLineNumbers";
+    exports.TOGGLE_ACTIVE_LINE          = "view.toggleActiveLine";
+    exports.TOGGLE_WORD_WRAP            = "view.toggleWordWrap";
     exports.TOGGLE_JSLINT               = "debug.jslint";
     exports.SORT_WORKINGSET_BY_ADDED    = "view.sortWorkingSetByAdded";
     exports.SORT_WORKINGSET_BY_NAME     = "view.sortWorkingSetByName";

src/command/DefaultMenus.js

@@ -108,6 +108,10 @@ define(function (require, exports, module) {
         menu.addMenuItem(Commands.VIEW_DECREASE_FONT_SIZE);
         menu.addMenuItem(Commands.VIEW_RESTORE_FONT_SIZE);
         menu.addMenuDivider();
+        menu.addMenuItem(Commands.TOGGLE_LINE_NUMBERS);
+        menu.addMenuItem(Commands.TOGGLE_ACTIVE_LINE);
+        menu.addMenuItem(Commands.TOGGLE_WORD_WRAP);
+        menu.addMenuDivider();
         menu.addMenuItem(Commands.TOGGLE_JSLINT);
 
         /*

src/editor/Editor.js

@@ -73,7 +73,8 @@ define(function (require, exports, module) {
         ViewUtils          = require("utils/ViewUtils");
 
     var PREFERENCES_CLIENT_ID = "com.adobe.brackets.Editor",
-        defaultPrefs = { useTabChar: false, tabSize: 4, indentUnit: 4, closeBrackets: false };
+        defaultPrefs = { useTabChar: false, tabSize: 4, indentUnit: 4, closeBrackets: false,
+                         showLineNumbers: true, styleActiveLine: true, wordWrap: true };
 
     /** Editor preferences */
     var _prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs);
@@ -90,6 +91,15 @@ define(function (require, exports, module) {
     /** @type {boolean}  Global setting: Auto closes (, {, [, " and ' */
     var _closeBrackets = _prefs.getValue("closeBrackets");
 
+    /** @type {boolean}  Global setting: Show line numbers in the gutter */
+    var _showLineNumbers = _prefs.getValue("showLineNumbers");
+
+    /** @type {boolean}  Global setting: Highlight the background of the line that has the cursor */
+    var _styleActiveLine = _prefs.getValue("styleActiveLine");
+
+    /** @type {boolean}  Global setting: Auto wrap lines */
+    var _wordWrap = _prefs.getValue("wordWrap");
+
     /** @type {boolean}  Guard flag to prevent focus() reentrancy (via blur handlers), even across Editors */
     var _duringFocus = false;
 
@@ -344,9 +354,11 @@ define(function (require, exports, module) {
             indentWithTabs: _useTabChar,
             tabSize: _tabSize,
             indentUnit: _indentUnit,
-            lineNumbers: true,
+            lineNumbers: _showLineNumbers,
+            lineWrapping: _wordWrap,
+            styleActiveLine: _styleActiveLine,
             matchBrackets: true,
-            dragDrop: false,    // work around issue #1123
+            dragDrop: true,
             extraKeys: codeMirrorKeyMap,
             autoCloseBrackets: _closeBrackets,
             autoCloseTags: {
@@ -1363,6 +1375,60 @@ define(function (require, exports, module) {
         return _closeBrackets;
     };
 
+      /**
+     * Sets show line numbers option and reapply it to all open editors.
+     * @param {boolean} value
+     */
+    Editor.setShowLineNumbers = function (value) {
+        _showLineNumbers = value;
+        _instances.forEach(function (editor) {
+            editor._codeMirror.setOption("lineNumbers", _showLineNumbers);
+        });
+        
+        _prefs.setValue("showLineNumbers", Boolean(_showLineNumbers));
+    };
+    
+    /** @type {boolean} Gets whether all editors are showing line numbers */
+    Editor.getShowLineNumbers = function () {
+        return _showLineNumbers;
+    };
+    
+    /**
+     * Sets show active line option and reapply it to all open editors.
+     * @param {boolean} value
+     */
+    Editor.setShowActiveLine = function (value) {
+        _styleActiveLine = value;
+        _instances.forEach(function (editor) {
+            editor._codeMirror.setOption("styleActiveLine", _styleActiveLine);
+        });
+        
+        _prefs.setValue("styleActiveLine", Boolean(_styleActiveLine));
+    };
+    
+    /** @type {boolean} Gets whether all editors are showing active line */
+    Editor.getShowActiveLine = function () {
+        return _styleActiveLine;
+    };
+    
+    /**
+     * Sets word wrap option and reapply it to all open editors.
+     * @param {boolean} value
+     */
+    Editor.setWordWrap = function (value) {
+        _wordWrap = value;
+        _instances.forEach(function (editor) {
+            editor._codeMirror.setOption("lineWrapping", _wordWrap);
+        });
+        
+        _prefs.setValue("wordWrap", Boolean(_wordWrap));
+    };
+    
+    /** @type {boolean} Gets whether all editors are enabled for word wrap */
+    Editor.getWordWrap = function () {
+        return _wordWrap;
+    };
+    
     // Define public API
     exports.Editor                  = Editor;
     exports.BOUNDARY_CHECK_NORMAL   = BOUNDARY_CHECK_NORMAL;

src/editor/EditorOptionHandlers.js

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define, window, $ */
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var AppInit                 = require("utils/AppInit"),
+        Editor                  = require("editor/Editor").Editor,
+        Commands                = require("command/Commands"),
+        CommandManager          = require("command/CommandManager"),
+        Strings                 = require("strings");
+    
+    /**
+     * @private
+     * Activates/Deactivates showing line numbers option
+     */
+    function _toggleLineNumbers() {
+        Editor.setShowLineNumbers(!Editor.getShowLineNumbers());
+        CommandManager.get(Commands.TOGGLE_LINE_NUMBERS).setChecked(Editor.getShowLineNumbers());
+    }
+    
+
+    /**
+     * @private
+     * Activates/Deactivates showing active line option
+     */
+    function _toggleActiveLine() {
+        Editor.setShowActiveLine(!Editor.getShowActiveLine());
+        CommandManager.get(Commands.TOGGLE_ACTIVE_LINE).setChecked(Editor.getShowActiveLine());
+    }
+    
+
+    /**
+     * @private
+     * Activates/Deactivates word wrap option
+     */
+    function _toggleWordWrap() {
+        Editor.setWordWrap(!Editor.getWordWrap());
+        CommandManager.get(Commands.TOGGLE_WORD_WRAP).setChecked(Editor.getWordWrap());
+    }
+    
+    function _init() {
+        CommandManager.get(Commands.TOGGLE_LINE_NUMBERS).setChecked(Editor.getShowLineNumbers());
+        CommandManager.get(Commands.TOGGLE_ACTIVE_LINE).setChecked(Editor.getShowActiveLine());
+        CommandManager.get(Commands.TOGGLE_WORD_WRAP).setChecked(Editor.getWordWrap());
+    }
+    
+    CommandManager.register(Strings.CMD_TOGGLE_LINE_NUMBERS, Commands.TOGGLE_LINE_NUMBERS, _toggleLineNumbers);
+    CommandManager.register(Strings.CMD_TOGGLE_ACTIVE_LINE, Commands.TOGGLE_ACTIVE_LINE, _toggleActiveLine);
+    CommandManager.register(Strings.CMD_TOGGLE_WORD_WRAP, Commands.TOGGLE_WORD_WRAP, _toggleWordWrap);
+
+    AppInit.htmlReady(_init);
+});

src/index.html

@@ -101,10 +101,11 @@
     <script src="thirdparty/CodeMirror2/lib/codemirror.js"></script>
     <script src="thirdparty/CodeMirror2/addon/edit/matchbrackets.js"></script>
     <script src="thirdparty/CodeMirror2/addon/edit/closebrackets.js"></script>
-    
+    <script src="thirdparty/CodeMirror2/addon/edit/closetag.js"></script>
+    <script src="thirdparty/CodeMirror2/addon/selection/active-line.js"></script>
+   
     <!-- JS for CodeMirror search support -->
     <script src="thirdparty/CodeMirror2/addon/search/searchcursor.js"></script>
-    <script src="thirdparty/CodeMirror2/addon/edit/closetag.js"></script>
 
 </head>
 <body>

src/nls/root/strings.js

@@ -211,6 +211,9 @@ define({
     "CMD_INCREASE_FONT_SIZE"              : "Increase Font Size",
     "CMD_DECREASE_FONT_SIZE"              : "Decrease Font Size",
     "CMD_RESTORE_FONT_SIZE"               : "Restore Font Size",
+    "CMD_TOGGLE_LINE_NUMBERS"             : "Show Line Numbers",
+    "CMD_TOGGLE_ACTIVE_LINE"              : "Show Active Line",
+    "CMD_TOGGLE_WORD_WRAP"                : "Enable Word Wrap",
     "CMD_SORT_WORKINGSET_BY_ADDED"        : "Sort by Added",
     "CMD_SORT_WORKINGSET_BY_NAME"         : "Sort by Name",
     "CMD_SORT_WORKINGSET_BY_TYPE"         : "Sort by Type",

src/styles/brackets.less

@@ -570,6 +570,10 @@ a, img {
         height: auto;
     }
 
+    .CodeMirror-activeline-background {
+        background: darken(@activeline-bgcolor, @bc-color-step-size / 2) !important; 
+    }
+    
     .inline-editor-header {
         padding: 10px 10px 0px 10px;
 

src/styles/brackets_codemirror_override.less

@@ -44,6 +44,10 @@
 
 @code-padding: 15px;
 
+.CodeMirror-activeline-background {
+    background: @activeline-bgcolor !important; 
+}
+
 .cm-s-default {
     span.cm-keyword {color: @accent-keyword;}
     span.cm-atom {color: @accent-atom;}

src/styles/brackets_theme_default.less

@@ -101,6 +101,9 @@
 @selection-color-focused: #d2dcf8;
 @selection-color-unfocused: #d9d9d9;
 
+/* background color of the line that has the cursor */
+@activeline-bgcolor: #e8f2ff;
+
 /* Code font formatting
  *
  * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that