Stop using flexbox in editor's parent hierarchy

src/editor/EditorManager.js

@@ -313,29 +313,54 @@ define(function (require, exports, module) {
     }
 
 
+    /**
+     * Calculates the available height for the full-size Editor (or the no-editor placeholder),
+     * accounting for the current size of all visible panels, toolbar, & status bar.
+     * @return {number}
+     */
+    function _calcEditorHeight() {
+        var availableHt = $(".content").height();
+
+        _editorHolder.siblings().each(function (i, elem) {
+            var $elem = $(elem);
+            if ($elem.css("display") !== "none") {
+                availableHt -= $elem.outerHeight();
+            }
+        });
+        return availableHt;
+    }
+
     /** 
-     * Resize the editor. This should only be called if the contents of the editor holder are changed
-     * or if the height of the editor holder changes (except for overall window resizes, which are
-     * already taken care of automatically).
-     * @see #_updateEditorSize()
+     * Resize the editor. This must be called any time the contents of the editor area are swapped
+     * or any time the editor area might change height. EditorManager takes care of calling this when
+     * the Editor is swapped, and on window resize. But anyone who changes size/visiblity of editor
+     * area siblings (toolbar, status bar, bottom panels) *must* manually call resizeEditor().
+     *
+     * @param {boolean=} skipRefresh For internal use, to avoid redundant refresh()es during window resize
      */
-    function resizeEditor() {
+    function resizeEditor(skipRefresh) {
+        if (!_editorHolder) {
+            return;  // still too early during init
+        }
+
+        var editorAreaHt = _calcEditorHeight();
+        _editorHolder.height(editorAreaHt);    // affects size of "not-editor" placeholder as well
+
         if (_currentEditor) {
-            $(_currentEditor.getScrollerElement()).height(_editorHolder.height());
-            _currentEditor.refresh();
+            $(_currentEditor.getScrollerElement()).height(editorAreaHt);
+            if (!skipRefresh) {
+                _currentEditor.refresh();
+            }
         }
     }
 
     /**
      * NJ's editor-resizing fix. Whenever the window resizes, we immediately adjust the editor's
      * height.
-     * @see #resizeEditor()
      */
     function _updateEditorSize() {
-        // The editor itself will call refresh() when it gets the window resize event.
-        if (_currentEditor) {
-            $(_currentEditor.getScrollerElement()).height(_editorHolder.height());
-        }
+        // skipRefresh=true since CodeMirror will call refresh() itself when it sees the resize event
+        resizeEditor(true);
     }
 
     /**

src/project/SidebarView.js

@@ -94,10 +94,14 @@ define(function (require, exports, module) {
             $sidebar.width(width);
             $sidebarResizer.css("left", width - 1);
 
-            // the following three lines help resize things when the sidebar shows
-            // but ultimately these should go into ProjectManager.js with a "notify" 
-            // event that we can just call from anywhere instead of hard-coding it.
-            // waiting on a ProjectManager refactor to add that. 
+            // This maintains the editor position to the right of the sidebar. (A simple float is not enough
+            // because the non-floated content technically underlaps the floated sidebar; this breaks CodeMirror
+            // listeners and relative positioning).
+            // TODO: Ultimately this should go into EditorManager.js, triggered via an event we dispatch
+            $(".content", $sidebar.parent()).css("margin-left", width);
+
+            // This helps resize things within the sidebar when it's shown.
+            // TODO: Ultimately this should go into ProjectManager.js, triggered via an event we dispatch
             $sidebar.find(".sidebar-selection").width(width);
 
             if (width > 10) {
@@ -146,6 +150,7 @@ define(function (require, exports, module) {
 
         $sidebarResizer.css("left", sidebarWidth - 1);
 
+        // Initially size sidebar at app startup
         if (prefs.getValue("sidebarClosed")) {
             toggleSidebar(sidebarWidth);
         } else {
@@ -169,7 +174,7 @@ define(function (require, exports, module) {
 
             isMouseDown = true;
 
-            // take away the shadows (for performance reasons during sidebarmovement)
+            // take away the shadows (for performance reasons during sidebar movement)
             $sidebar.find(".scroller-shadow").css("display", "none");
 
             $body.toggleClass("resizing");

src/styles/brackets.less

@@ -60,7 +60,7 @@ html, body {
 }
 
 body {
-    .vbox;
+    height: 100%;
 
     &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
         cursor: col-resize;   
@@ -88,17 +88,17 @@ a, img {
 }
 
 .main-view {
-    .hbox;
-    .box-flex(1);
+    height: 100%;
 
     .sidebar {
+        height: 100%;
         .vbox;
         width: @sidebar-width;
+        float: left;
     }
 
     .content {
-        .vbox;
-        .box-flex(1);
+        height: 100%;
     }
 }
 
@@ -222,13 +222,11 @@ a, img {
 }
 
 #editor-holder {
-    .vbox;
-    .box-flex(1);
     position: relative;
 
     /* Placeholder shown when there is no editor open */
     #not-editor {
-        .box-flex(1);
+        height: 100%;
         .vbox;
         .box-pack(center);
         .box-align(center);