Merge pull request #1847 from adobe/pflynn/no-editor-flex-box

redmunds · redmunds · commit afe34560b1d5 · 2012-10-16T17:50:44.000-07:00
Stop using flexbox in editor's parent hierarchy
diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js
@@ -65,9 +65,6 @@ define(function (require, exports, module) {
     /** @type {Document} */
     var _currentEditorsDocument = null;
     
-    /** @type {number} Used by {@link #_updateEditorSize()} */
-    var _resizeTimeout = null;
-    
     /**
      * Registered inline-editor widget providers. See {@link #registerInlineEditProvider()}.
      * @type {Array.<function(...)>}
@@ -313,29 +310,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());
-        }
+    function _updateEditorDuringResize() {
+        // skipRefresh=true since CodeMirror will call refresh() itself when it sees the resize event
+        resizeEditor(true);
     }
     
     /**
@@ -480,6 +502,8 @@ define(function (require, exports, module) {
         }
         
         _editorHolder = holder;
+        
+        resizeEditor();  // if no files open at startup, we won't get called back later to resize the "no-editor" placeholder
     }
     
     /**
@@ -720,7 +744,7 @@ define(function (require, exports, module) {
 
     // Add this as a capture handler so we're guaranteed to run it before the editor does its own
     // refresh on resize.
-    window.addEventListener("resize", _updateEditorSize, true);
+    window.addEventListener("resize", _updateEditorDuringResize, true);
     
     // Initialize: status bar focused listener
     $(exports).on("focusedEditorChange", _onFocusedEditorChange);
diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
@@ -62,7 +62,14 @@
             </div>
         </div>
         
-        <!-- Right-hand content: toolbar, editor, bottom panels -->
+        <!--
+            Right-hand content: vertical stack of toolbar, editor, bottom panels, status bar
+                (status bar is injected later - see StatusBar.init()).
+            Note: all children must be in a vertical stack with heights explicitly set in a fixed
+                unit such as px (not percent/em/auto). If you change the height later, you must
+                call EditorManager.resizeEditor() each time. Otherwise editor-holder's height will
+                not get set correctly.
+         -->
         <div class="content">
             <!-- Toolbar containing menus, filename, and icons -->
             <div id="main-toolbar" class="toolbar">
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
@@ -90,14 +90,22 @@ define(function (require, exports, module) {
         
         if (isSidebarClosed) {
             $sidebarResizer.css("left", 0);
+            
+            // Adjust content area left/width - see below
+            $(".content", $sidebar.parent()).css("margin-left", 0);
+            
         } else {
             $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 content area's 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 +154,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 +178,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");
diff --git a/src/styles/brackets.less b/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%;
     }
 }
 
@@ -228,13 +228,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);
