Provide editor options "line numbers", "active line" and "word wrap" as ...

src/brackets.js

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

src/command/Commands.js

@@ -80,6 +80,9 @@ define(function (require, exports, module) {
     exports.VIEW_RESTORE_FONT_SIZE      = "view.restoreFontSize";
     exports.VIEW_SCROLL_LINE_UP         = "view.scrollLineUp";
     exports.VIEW_SCROLL_LINE_DOWN       = "view.scrollLineDown";
+    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,8 +73,9 @@ define(function (require, exports, module) {
         ViewUtils          = require("utils/ViewUtils");
 
     var PREFERENCES_CLIENT_ID = PreferencesManager.getClientId(module.id),
-        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);
     //TODO: Remove preferences migration code
@@ -92,6 +93,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;
 
@@ -346,9 +356,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: {
@@ -1373,6 +1385,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/EditorManager.js

@@ -684,21 +684,8 @@ define(function (require, exports, module) {
         return result.promise();
     }
 
-    /**
-     * @private
-     * Activates/Deactivates the automatic close brackets option
-     */
-    function _toggleCloseBrackets() {
-        Editor.setCloseBrackets(!Editor.getCloseBrackets());
-        CommandManager.get(Commands.TOGGLE_CLOSE_BRACKETS).setChecked(Editor.getCloseBrackets());
-    }
-
-
     // Initialize: command handlers
     CommandManager.register(Strings.CMD_TOGGLE_QUICK_EDIT, Commands.TOGGLE_QUICK_EDIT, _toggleQuickEdit);
-    CommandManager.register(Strings.CMD_TOGGLE_CLOSE_BRACKETS, Commands.TOGGLE_CLOSE_BRACKETS, _toggleCloseBrackets)
-        .setChecked(Editor.getCloseBrackets());
-
 
     // Initialize: register listeners
     $(DocumentManager).on("currentDocumentChange", _onCurrentDocumentChange);

src/editor/EditorOptionHandlers.js

@@ -0,0 +1,87 @@
+/*
+ * 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());
+    }
+
+    /**
+     * @private
+     * Activates/Deactivates the automatic close brackets option
+     */
+    function _toggleCloseBrackets() {
+        Editor.setCloseBrackets(!Editor.getCloseBrackets());
+        CommandManager.get(Commands.TOGGLE_CLOSE_BRACKETS).setChecked(Editor.getCloseBrackets());
+    }
+
+    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.get(Commands.CMD_TOGGLE_CLOSE_BRACKETS).setChecked(Editor.getCloseBrackets());
+    }
+
+    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);
+    CommandManager.register(Strings.CMD_TOGGLE_CLOSE_BRACKETS, Commands.TOGGLE_CLOSE_BRACKETS, _toggleCloseBrackets);
+
+    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

@@ -213,6 +213,7 @@ define({
     "CMD_RESTORE_FONT_SIZE"               : "Restore Font Size",
     "CMD_SCROLL_LINE_UP"                  : "Scroll Line Up",
     "CMD_SCROLL_LINE_DOWN"                : "Scroll Line Down",
+    "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

test/UnitTestSuite.js

@@ -35,6 +35,7 @@ define(function (require, exports, module) {
     require("spec/DocumentCommandHandlers-test");
     require("spec/Editor-test");
     require("spec/EditorCommandHandlers-test");
+    require("spec/EditorOptionHandlers-test");
     require("spec/EditorManager-test");
     require("spec/ExtensionUtils-test");
     require("spec/FileIndexManager-test");

test/spec/EditorOptionHandlers-test-files/test.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+<title>Simple Test</title>
+<link rel="stylesheet" href="test.css">
+</head>
+
+<body>
+<p class="longLineClass">Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome! Brackets is awesome!</p>
+<p class="longLineClass">Brackets is awesome!</p>
+</body>
+</html>