Merge pull request #7641 from lkcampbell/fix-7283

Fix Issue #7283: Padding with line numbers turned off is broken

Author: TomMalbran

src/editor/Editor.js

@@ -2033,6 +2033,10 @@ define(function (require, exports, module) {
             } else if (prefName === SCROLL_PAST_END && this._visibleRange) {
                 // Do not apply this option to inline editors
                 return;
+            } else if (prefName === SHOW_LINE_NUMBERS) {
+                Editor._toggleLinePadding(!newValue);
+                this._codeMirror.setOption(cmOptions[SHOW_LINE_NUMBERS], newValue);
+                this.refreshAll();
             } else {
                 this._codeMirror.setOption(cmOptions[prefName], newValue);
             }
@@ -2204,6 +2208,16 @@ define(function (require, exports, module) {
         return PreferencesManager.get(WORD_WRAP, fullPath);
     };
 
+    /**
+     * @private
+     * Toggles the left padding of all code editors.  Used to provide more
+     * space between the code text and the left edge of the editor when
+     * line numbers are hidden.
+     * @param {boolean} showLinePadding
+     */
+    Editor._toggleLinePadding = function (showLinePadding) {
+        $("#editor-holder").toggleClass("show-line-padding", showLinePadding);
+    };
 
     // Set up listeners for preference changes
     editorOptions.forEach(function (prefName) {

src/editor/EditorOptionHandlers.js

@@ -91,6 +91,10 @@ define(function (require, exports, module) {
         _.each(_optionMapping, function (commandName, prefName) {
             CommandManager.get(commandName).setChecked(PreferencesManager.get(prefName));
         });
+        
+        if (!Editor.getShowLineNumbers()) {
+            Editor._toggleLinePadding(true);
+        }
     }
 
     CommandManager.register(Strings.CMD_TOGGLE_LINE_NUMBERS, Commands.TOGGLE_LINE_NUMBERS, _getToggler(SHOW_LINE_NUMBERS));

src/styles/brackets_codemirror_override.less

@@ -24,6 +24,10 @@
     padding: 0 @code-padding 0 0;
 }
 
+.show-line-padding .CodeMirror pre {
+    padding-left: @code-padding;
+}
+
 .CodeMirror-scroll {
     background-color: @background-color-3;
 }
@@ -45,9 +49,15 @@
 .CodeMirror-activeline-background {
     background: transparent;
 }
+
 .CodeMirror-focused .CodeMirror-activeline-background {
     background: @activeline-bgcolor;
 }
+
+.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
+    box-shadow: inset @code-padding 0 0 0 @activeline-number-bgcolor;
+}
+
 .CodeMirror-focused .CodeMirror-activeline {
     & > div, .CodeMirror-gutter-elt {
         height: 100%;
@@ -228,15 +238,24 @@
     .CodeMirror .CodeMirror-activeline-background {
         background: transparent;
     }
+    
+    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
+        box-shadow: none;
+    }
+    
     .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
         background: transparent;
         color: @accent-comment;
     }
-
+    
     .CodeMirror-focused .CodeMirror-activeline-background {
         background: @activeline-bgcolor;
     }
 
+    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
+        box-shadow: inset @code-padding 0 0 0 @tc-gray-panel-top-bar;
+    }
+    
     .CodeMirror-focused .CodeMirror-activeline {
         .CodeMirror-gutter-elt {
             background: @tc-gray-panel-top-bar;