Merge pull request #4579 from adobe/pflynn/selection-info

Enhance status bar to show length of selection

Author: RaymondLim

src/editor/Editor.js

@@ -713,23 +713,31 @@ define(function (require, exports, module) {
         var cursor = this._codeMirror.getCursor();
 
         if (expandTabs) {
-            var line    = this._codeMirror.getRange({line: cursor.line, ch: 0}, cursor),
-                tabSize = Editor.getTabSize(),
-                column  = 0,
-                i;
+            cursor.ch = this.getColOffset(cursor);
+        }
+        return cursor;
+    };
+    
+    /**
+     * Returns the display column (zero-based) for a given string-based pos. Differs from pos.ch only
+     * when the line contains preceding \t chars. Result depends on the current tab size setting.
+     * @param {!{line:number, ch:number}}
+     * @return {number}
+     */
+    Editor.prototype.getColOffset = function (pos) {
+        var line    = this._codeMirror.getRange({line: pos.line, ch: 0}, pos),
+            tabSize = Editor.getTabSize(),
+            column  = 0,
+            i;
 
-            for (i = 0; i < line.length; i++) {
-                if (line[i] === '\t') {
-                    column += (tabSize - (column % tabSize));
-                } else {
-                    column++;
-                }
+        for (i = 0; i < line.length; i++) {
+            if (line[i] === '\t') {
+                column += (tabSize - (column % tabSize));
+            } else {
+                column++;
             }
-            
-            cursor.ch = column;
         }
-        
-        return cursor;
+        return column;
     };
 
     /**

src/editor/EditorStatusBar.js

@@ -49,13 +49,17 @@ define(function (require, exports, module) {
         $indentWidthInput;
 
 
+    function _formatCountable(number, singularStr, pluralStr) {
+        return StringUtils.format(number > 1 ? pluralStr : singularStr, number);
+    }
+    
     function _updateLanguageInfo(editor) {
         $languageInfo.text(editor.document.getLanguage().getName());
     }
 
     function _updateFileInfo(editor) {
         var lines = editor.lineCount();
-        $fileInfo.text(StringUtils.format(lines > 1 ? Strings.STATUSBAR_LINE_COUNT_PLURAL : Strings.STATUSBAR_LINE_COUNT_SINGULAR, lines));
+        $fileInfo.text(_formatCountable(lines, Strings.STATUSBAR_LINE_COUNT_SINGULAR, Strings.STATUSBAR_LINE_COUNT_PLURAL));
     }
 
     function _updateIndentType() {
@@ -87,7 +91,26 @@ define(function (require, exports, module) {
         // compute columns, account for tab size
         var cursor = editor.getCursorPos(true);
 
-        $cursorInfo.text(StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, cursor.line + 1, cursor.ch + 1));
+        var cursorStr = StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, cursor.line + 1, cursor.ch + 1);
+        if (editor.hasSelection()) {
+            // Show info about selection size when one exists
+            var sel = editor.getSelection(),
+                selStr;
+            
+            if (sel.start.line !== sel.end.line) {
+                var lines = sel.end.line - sel.start.line + 1;
+                if (sel.end.ch === 0) {
+                    lines--;  // end line is exclusive if ch is 0, inclusive otherwise
+                }
+                selStr = _formatCountable(lines, Strings.STATUSBAR_SELECTION_LINE_SINGULAR, Strings.STATUSBAR_SELECTION_LINE_PLURAL);
+            } else {
+                var cols = editor.getColOffset(sel.end) - editor.getColOffset(sel.start);  // end ch is exclusive always
+                selStr = _formatCountable(cols, Strings.STATUSBAR_SELECTION_CH_SINGULAR, Strings.STATUSBAR_SELECTION_CH_PLURAL);
+            }
+            $cursorInfo.text(cursorStr + selStr);
+        } else {
+            $cursorInfo.text(cursorStr);
+        }
     }
 
     function _changeIndentWidth(value) {

src/nls/root/strings.js

@@ -158,6 +158,10 @@ define({
      * StatusBar strings
      */
     "STATUSBAR_CURSOR_POSITION"             : "Line {0}, Column {1}",
+    "STATUSBAR_SELECTION_CH_SINGULAR"       : " \u2014 Selected {0} column",
+    "STATUSBAR_SELECTION_CH_PLURAL"         : " \u2014 Selected {0} columns",
+    "STATUSBAR_SELECTION_LINE_SINGULAR"     : " \u2014 Selected {0} line",
+    "STATUSBAR_SELECTION_LINE_PLURAL"       : " \u2014 Selected {0} lines",
     "STATUSBAR_INDENT_TOOLTIP_SPACES"       : "Click to switch indentation to spaces",
     "STATUSBAR_INDENT_TOOLTIP_TABS"         : "Click to switch indentation to tabs",
     "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES"  : "Click to change number of spaces used when indenting",

test/spec/Editor-test.js

@@ -200,5 +200,56 @@ define(function (require, exports, module) {
             });
 
         });
+        
+        describe("Column/ch conversion", function () {
+            it("should get mode in HTML file", function () {
+                var content =
+                    "foo () {\n" +
+                    "    one;\n" +
+                    "\ttwo;\n" +
+                    "}\n" +
+                    "\n" +
+                    "\tA\tB";
+                createTestEditor(content, "javascript");
+                
+                // Tab size 4
+                
+                expect(myEditor.getColOffset({line: 1, ch: 0})).toBe(0);
+                expect(myEditor.getColOffset({line: 1, ch: 1})).toBe(1);
+                expect(myEditor.getColOffset({line: 1, ch: 2})).toBe(2);
+                expect(myEditor.getColOffset({line: 1, ch: 3})).toBe(3);
+                expect(myEditor.getColOffset({line: 1, ch: 4})).toBe(4);
+                expect(myEditor.getColOffset({line: 1, ch: 5})).toBe(5);
+                expect(myEditor.getColOffset({line: 2, ch: 0})).toBe(0);
+                expect(myEditor.getColOffset({line: 2, ch: 1})).toBe(4);
+                expect(myEditor.getColOffset({line: 2, ch: 2})).toBe(5);
+                expect(myEditor.getColOffset({line: 4, ch: 0})).toBe(0);
+                expect(myEditor.getColOffset({line: 5, ch: 1})).toBe(4);
+                expect(myEditor.getColOffset({line: 5, ch: 2})).toBe(5);
+                expect(myEditor.getColOffset({line: 5, ch: 3})).toBe(8);
+                expect(myEditor.getColOffset({line: 5, ch: 4})).toBe(9);
+                
+                // Tab size 2
+                Editor.setTabSize(2);
+                
+                expect(myEditor.getColOffset({line: 1, ch: 0})).toBe(0);  // first line is all spaces: should be unchanged
+                expect(myEditor.getColOffset({line: 1, ch: 1})).toBe(1);
+                expect(myEditor.getColOffset({line: 1, ch: 2})).toBe(2);
+                expect(myEditor.getColOffset({line: 1, ch: 3})).toBe(3);
+                expect(myEditor.getColOffset({line: 1, ch: 4})).toBe(4);
+                expect(myEditor.getColOffset({line: 1, ch: 5})).toBe(5);
+                expect(myEditor.getColOffset({line: 2, ch: 0})).toBe(0);  // but line with a tab shows different behavior
+                expect(myEditor.getColOffset({line: 2, ch: 1})).toBe(2);
+                expect(myEditor.getColOffset({line: 2, ch: 2})).toBe(3);
+                expect(myEditor.getColOffset({line: 4, ch: 0})).toBe(0);
+                expect(myEditor.getColOffset({line: 5, ch: 1})).toBe(2);  // same here
+                expect(myEditor.getColOffset({line: 5, ch: 2})).toBe(3);
+                expect(myEditor.getColOffset({line: 5, ch: 3})).toBe(4);
+                expect(myEditor.getColOffset({line: 5, ch: 4})).toBe(5);
+                
+                // Restore default
+                Editor.setTabSize(4);
+            });
+        });
     });
 });