Merge pull request #3097 from adobe/rlim/word-wrap

jasonsanjose · jasonsanjose · commit 0ca4305a2521 · 2013-03-20T14:24:37.000-07:00
Provide editor options "line numbers", "active line" and "word wrap" as ...
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -76,6 +76,8 @@ module.exports = function (grunt) {
                     'src/thirdparty/CodeMirror2/lib/codemirror.js',
                     'src/thirdparty/CodeMirror2/lib/util/dialog.js',
                     'src/thirdparty/CodeMirror2/lib/util/searchcursor.js',
+                    'src/thirdparty/CodeMirror2/addon/edit/closetag.js',
+                    'src/thirdparty/CodeMirror2/addon/selection/active-line.js',
                     'src/thirdparty/mustache/mustache.js',
                     'src/thirdparty/path-utils/path-utils.min',
                     'src/thirdparty/less-1.3.0.min.js'
diff --git a/src/brackets.js b/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");
diff --git a/src/command/Commands.js b/src/command/Commands.js
@@ -81,6 +81,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";
diff --git a/src/command/DefaultMenus.js b/src/command/DefaultMenus.js
@@ -110,6 +110,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);
 
         /*
diff --git a/src/editor/Editor.js b/src/editor/Editor.js
@@ -72,8 +72,9 @@ define(function (require, exports, module) {
         TokenUtils         = require("utils/TokenUtils"),
         ViewUtils          = require("utils/ViewUtils");
     
-    var defaultPrefs = { useTabChar: false, tabSize: 4, indentUnit: 4, closeBrackets: false };
-
+    var defaultPrefs = { useTabChar: false, tabSize: 4, indentUnit: 4, closeBrackets: false,
+                         showLineNumbers: true, styleActiveLine: true, wordWrap: true };
+    
     /** Editor preferences */
     var _prefs = PreferencesManager.getPreferenceStorage(module, defaultPrefs);
     //TODO: Remove preferences migration code
@@ -91,6 +92,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;
 
@@ -345,9 +355,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: {
@@ -1300,17 +1312,29 @@ define(function (require, exports, module) {
     // Global settings that affect all Editor instances (both currently open Editors as well as those created
     // in the future)
 
+    
+    /**
+     * @private
+     * Updates Editor option and the corresponding preference with the given value. Affects all Editors.
+     * @param {boolean | number} value
+     * @param {string} cmOption - CodeMirror option string
+     * @param {string} prefName - preference name string
+     */
+    function _setEditorOptionAndPref(value, cmOption, prefName) {
+        _instances.forEach(function (editor) {
+            editor._codeMirror.setOption(cmOption, value);
+        });
+        
+        _prefs.setValue(prefName, (typeof value === "boolean") ? Boolean(value) : value);
+    }
+		
     /**
      * Sets whether to use tab characters (vs. spaces) when inserting new text. Affects all Editors.
      * @param {boolean} value
      */
     Editor.setUseTabChar = function (value) {
         _useTabChar = value;
-        _instances.forEach(function (editor) {
-            editor._codeMirror.setOption("indentWithTabs", _useTabChar);
-        });
-        
-        _prefs.setValue("useTabChar", Boolean(_useTabChar));
+        _setEditorOptionAndPref(value, "indentWithTabs", "useTabChar");
     };
     
     /** @type {boolean} Gets whether all Editors use tab characters (vs. spaces) when inserting new text */
@@ -1324,11 +1348,7 @@ define(function (require, exports, module) {
      */
     Editor.setTabSize = function (value) {
         _tabSize = value;
-        _instances.forEach(function (editor) {
-            editor._codeMirror.setOption("tabSize", _tabSize);
-        });
-        
-        _prefs.setValue("tabSize", _tabSize);
+        _setEditorOptionAndPref(value, "tabSize", "tabSize");
     };
     
     /** @type {number} Get indent unit  */
@@ -1342,11 +1362,7 @@ define(function (require, exports, module) {
      */
     Editor.setIndentUnit = function (value) {
         _indentUnit = value;
-        _instances.forEach(function (editor) {
-            editor._codeMirror.setOption("indentUnit", _indentUnit);
-        });
-        
-        _prefs.setValue("indentUnit", _indentUnit);
+        _setEditorOptionAndPref(value, "indentUnit", "indentUnit");
     };
     
     /** @type {number} Get indentation width */
@@ -1360,18 +1376,56 @@ define(function (require, exports, module) {
      */
     Editor.setCloseBrackets = function (value) {
         _closeBrackets = value;
-        _instances.forEach(function (editor) {
-            editor._codeMirror.setOption("autoCloseBrackets", _closeBrackets);
-        });
-        
-        _prefs.setValue("closeBrackets", Boolean(_closeBrackets));
+        _setEditorOptionAndPref(value, "autoCloseBrackets", "closeBrackets");
     };
     
     /** @type {boolean} Gets whether all Editors use auto close brackets */
     Editor.getCloseBrackets = function () {
         return _closeBrackets;
     };
     
+    /**
+     * Sets show line numbers option and reapply it to all open editors.
+     * @param {boolean} value
+     */
+    Editor.setShowLineNumbers = function (value) {
+        _showLineNumbers = value;
+        _setEditorOptionAndPref(value, "lineNumbers", "showLineNumbers");
+    };
+    
+    /** @type {boolean} Returns true if show line numbers is enabled for all editors */
+    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;
+        _setEditorOptionAndPref(value, "styleActiveLine", "styleActiveLine");
+    };
+    
+    /** @type {boolean} Returns true if show active line is enabled for all editors */
+    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;
+        _setEditorOptionAndPref(value, "lineWrapping", "wordWrap");
+    };
+    
+    /** @type {boolean} Returns true if word wrap is enabled for all editors */
+    Editor.getWordWrap = function () {
+        return _wordWrap;
+    };
+    
     // Define public API
     exports.Editor                  = Editor;
     exports.BOUNDARY_CHECK_NORMAL   = BOUNDARY_CHECK_NORMAL;
diff --git a/src/editor/EditorManager.js b/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);
diff --git a/src/editor/EditorOptionHandlers.js b/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 */
+
+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.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);
+});
diff --git a/src/index.html b/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>
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -215,6 +215,9 @@ define({
     "CMD_RESTORE_FONT_SIZE"               : "Restore Font Size",
     "CMD_SCROLL_LINE_UP"                  : "Scroll Line Up",
     "CMD_SCROLL_LINE_DOWN"                : "Scroll Line Down",
+    "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",
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -555,6 +555,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;
         
diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less
@@ -38,6 +38,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;}
diff --git a/src/styles/brackets_theme_default.less b/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
diff --git a/test/SpecRunner.html b/test/SpecRunner.html
@@ -39,6 +39,7 @@
   <script src="../src/thirdparty/CodeMirror2/lib/codemirror.js"></script>
   <script src="../src/thirdparty/CodeMirror2/addon/search/searchcursor.js"></script>
   <script src="../src/thirdparty/CodeMirror2/addon/edit/closetag.js"></script>
+  <script src="thirdparty/CodeMirror2/addon/selection/active-line.js"></script> 
   <script src="../src/thirdparty/mustache/mustache.js"></script>
   <script src="../src/thirdparty/path-utils/path-utils.js"></script>
   <script src="../src/thirdparty/less-1.3.0.min.js"></script>
diff --git a/test/UnitTestSuite.js b/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/ExtensionInstallation-test");
     require("spec/ExtensionUtils-test");
diff --git a/test/spec/EditorOptionHandlers-test-files/test.css b/test/spec/EditorOptionHandlers-test-files/test.css
diff --git a/test/spec/EditorOptionHandlers-test-files/test.html b/test/spec/EditorOptionHandlers-test-files/test.html
diff --git a/test/spec/EditorOptionHandlers-test.js b/test/spec/EditorOptionHandlers-test.js

Original file line number	Diff line number	Diff line change
`@@ -555,6 +555,10 @@ a, img {`
`555`	`555`	`height: auto;`
`556`	`556`	`}`
`557`	`557`
	`558`	`+ .CodeMirror-activeline-background {`
	`559`	`+ background: darken(@activeline-bgcolor, @bc-color-step-size / 2) !important;`
	`560`	`+ }`
	`561`	`+`
`558`	`562`	`.inline-editor-header {`
`559`	`563`	`padding: 10px 10px 0px 10px;`
`560`	`564`