Improved panel management - prevent resizing panels larger than available space

src/editor/EditorManager.js

@@ -52,6 +52,7 @@ define(function (require, exports, module) {
 
     // Load dependent modules
     var Commands            = require("command/Commands"),
+        PanelManager        = require("view/PanelManager"),
         CommandManager      = require("command/CommandManager"),
         DocumentManager     = require("document/DocumentManager"),
         PerfUtils           = require("utils/PerfUtils"),
@@ -341,55 +342,43 @@ 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();
-            }
-        });
-
-        // Clip value to 0 (it could be negative if a panel wants more space than we have)
-        return Math.max(availableHt, 0);
-    }
-
-    /**
-     * Flag for resizeEditor() to always force refresh.
+     * Flag for _onEditorAreaResize() to always force refresh.
      * @const
      * @type {string}
      */
     var REFRESH_FORCE = "force";
 
     /**
-     * Flag for resizeEditor() to never refresh.
+     * Flag for _onEditorAreaResize() to never refresh.
      * @const
      * @type {string}
      */
     var REFRESH_SKIP = "skip";
 
-    /** 
-     * 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 {string=} refreshFlag For internal use. Set to "force" to ensure the editor will refresh, 
-     *    "skip" to ensure the editor does not refresh, or leave undefined to let resizeEditor() determine 
-     *    whether it needs to refresh.
+    /**
+     * Must be called whenever the size/visibility of editor area siblings is changed without going through
+     * PanelManager or Resizer. Resizable panels created via PanelManager do not require this manual call.
      */
-    function resizeEditor(refreshFlag) {
+    function resizeEditor() {
         if (!_editorHolder) {
             return;  // still too early during init
         }
-
-        var editorAreaHt = _calcEditorHeight();
-        _editorHolder.height(editorAreaHt);    // affects size of "not-editor" placeholder as well
+        // PanelManager computes the correct editor-holder size & calls us back with it, via _onEditorAreaResize()
+        PanelManager._notifyLayoutChange();
+    }
+
+    /**
+     * Update the current CodeMirror editor's size. Must be called any time the contents of the editor area
+     * are swapped or any time the editor-holder area has changed height. EditorManager calls us in the swap
+     * case. PanelManager calls us in the most common height-change cases (panel and/or window resize), but
+     * some other cases are handled by external code calling resizeEditor() (e.g. ModalBar hide/show).
+     * 
+     * @param {number} editorAreaHt
+     * @param {string=} refreshFlag For internal use. Set to "force" to ensure the editor will refresh, 
+     *    "skip" to ensure the editor does not refresh, or leave undefined to let _onEditorAreaResize()
+     *    determine whether it needs to refresh.
+     */
+    function _onEditorAreaResize(event, editorAreaHt, refreshFlag) {
 
         if (_currentEditor) {
             var curRoot = _currentEditor.getRootElement(),
@@ -412,15 +401,6 @@ define(function (require, exports, module) {
         }
     }
 
-    /**
-     * NJ's editor-resizing fix. Whenever the window resizes, we immediately adjust the editor's
-     * height.
-     */
-    function _updateEditorDuringResize() {
-        // always skip the refresh since CodeMirror will call refresh() itself when it sees the resize event
-        resizeEditor(REFRESH_SKIP);
-    }
-
 
     /** Updates _viewStateCache from the given editor's actual current state */
     function _saveEditorViewState(editor) {
@@ -465,13 +445,13 @@ define(function (require, exports, module) {
         _currentEditorsDocument = document;
         _currentEditor = document._masterEditor;
 
-        // Skip refreshing the editor since we're going to refresh it in resizeEditor() later.
+        // Skip refreshing the editor since we're going to refresh it more explicitly below
         _currentEditor.setVisible(true, false);
         _currentEditor.focus();
 
         // Resize and refresh the editor, since it might have changed size or had other edits applied
         // since it was last visible.
-        resizeEditor(REFRESH_FORCE);
+        PanelManager._notifyLayoutChange(REFRESH_FORCE);
     }
 
     /**
@@ -705,11 +685,8 @@ define(function (require, exports, module) {
     $(DocumentManager).on("currentDocumentChange", _onCurrentDocumentChange);
     $(DocumentManager).on("workingSetRemove", _onWorkingSetRemove);
     $(DocumentManager).on("workingSetRemoveList", _onWorkingSetRemoveList);
+    $(PanelManager).on("editorAreaResize", _onEditorAreaResize);
 
-    // 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", _updateEditorDuringResize, true);
-
     // For unit tests and internal use only
     exports._openInlineWidget = _openInlineWidget;
     exports._createFullEditorForDocument = _createFullEditorForDocument;

src/extensions/default/JSLint/main.js

@@ -36,6 +36,7 @@ define(function (require, exports, module) {
 
     // Load dependent modules
     var Commands                = brackets.getModule("command/Commands"),
+        PanelManager            = brackets.getModule("view/PanelManager"),
         CommandManager          = brackets.getModule("command/CommandManager"),
         Menus                   = brackets.getModule("command/Menus"),
         DocumentManager         = brackets.getModule("document/DocumentManager"),
@@ -156,7 +157,7 @@ define(function (require, exports, module) {
                         EditorManager.focusEditor();
                     });
 
-                $lintResults.show();
+                Resizer.show($lintResults);
                 if (JSLINT.errors.length === 1) {
                     StatusBar.updateIndicator(INDICATOR_ID, true, "jslint-errors", Strings.JSLINT_ERROR_INFORMATION);
                 } else {
@@ -175,7 +176,7 @@ define(function (require, exports, module) {
                 setGotoEnabled(true);
 
             } else {
-                $lintResults.hide();
+                Resizer.hide($lintResults);
                 StatusBar.updateIndicator(INDICATOR_ID, true, "jslint-valid", Strings.JSLINT_NO_ERRORS);
                 setGotoEnabled(false);
             }
@@ -184,12 +185,10 @@ define(function (require, exports, module) {
 
         } else {
             // JSLint is disabled or does not apply to the current file, hide the results
-            $lintResults.hide();
+            Resizer.hide($lintResults);
             StatusBar.updateIndicator(INDICATOR_ID, true, "jslint-disabled", Strings.JSLINT_DISABLED);
             setGotoEnabled(false);
         }
-
-        EditorManager.resizeEditor();
     }
 
     /**
@@ -263,20 +262,15 @@ define(function (require, exports, module) {
         ExtensionUtils.loadStyleSheet(module, "jslint.css");
 
         var jsLintHtml = Mustache.render(JSLintTemplate, Strings);
-        $(jsLintHtml).insertBefore("#status-bar");
+        var resultsPanel = PanelManager.createBottomPanel("jslint.results", $(jsLintHtml), 100);
+        $lintResults = $("#jslint-results");
 
         var goldStarHtml = Mustache.render("<div id=\"gold-star\" title=\"{{JSLINT_NO_ERRORS}}\">&#9733;</div>", Strings);
         $(goldStarHtml).insertBefore("#status-file");
 
-        $lintResults = $("#jslint-results");
-
         StatusBar.addIndicator(INDICATOR_ID, $("#gold-star"));
 
         // Called on HTML ready to trigger the initial UI state
         setEnabled(_prefs.getValue("enabled"));
-
-        // AppInit.htmlReady() has already executed before extensions are loaded
-        // so, for now, we need to call this ourself
-        Resizer.makeResizable($lintResults.get(0), "vert", "top", 100);
     });
 });

src/extensions/default/JavaScriptCodeHints/unittests.js

@@ -49,26 +49,15 @@ define(function (require, exports, module) {
             DocumentManager.setCurrentDocument(doc);
         });
     });
+
     /**
-     * Returns an Editor suitable for use in isolation, given a Document. (Unlike
-     * SpecRunnerUtils.createMockEditor(), which is given text and creates the Document
-     * for you).
+     * Returns an Editor suitable for use in isolation, given a Document.
      *
      * @param {Document} doc - the document to be contained by the new Editor
      * @return {Editor} - the mock editor object
      */
     function createMockEditor(doc) {
-        // Initialize EditorManager
-        var $editorHolder = $("<div id='mock-editor-holder'/>");
-        EditorManager.setEditorHolder($editorHolder);
-        $("body").append($editorHolder);
-
-        // create Editor instance
-        var editor = new Editor(doc, true, $editorHolder.get(0));
-
-        EditorManager._notifyActiveEditorChanged(editor);
-
-        return editor;
+        return SpecRunnerUtils.createMockEditorForDocument(doc);
     }
 
     describe("JavaScript Code Hinting", function () {

src/htmlContent/main-view.html

@@ -62,7 +62,7 @@
             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.
+                not get set correctly. Use PanelManager to have this managed for you automatically.
          -->
         <div class="content">
             <!-- Horizontal titlebar containing menus & filename when inBrowser -->
@@ -83,14 +83,7 @@
                 </div>
             </div>
 
-            <div id="search-results" class="bottom-panel vert-resizable top-resizer no-focus">
-                <div class="toolbar simple-toolbar-layout">
-                    <div class="title">{{SEARCH_RESULTS}}</div>
-                    <div class="title" id="search-result-summary"></div>
-                    <a href="#" class="close">&times;</a>
-                </div>
-                <div class="table-container resizable-content"></div>
-            </div>
+            <!-- Bottom panels and status bar are programmatically created here -->
 
         </div>
 

src/htmlContent/search-results.html

@@ -0,0 +1,8 @@
+<div id="search-results" class="bottom-panel vert-resizable top-resizer no-focus">
+    <div class="toolbar simple-toolbar-layout">
+        <div class="title">{{SEARCH_RESULTS}}</div>
+        <div class="title" id="search-result-summary"></div>
+        <a href="#" class="close">&times;</a>
+    </div>
+    <div class="table-container resizable-content"></div>
+</div>

src/search/FindInFiles.js

@@ -22,7 +22,7 @@
  */
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global define, $, PathUtils, window */
+/*global define, $, PathUtils, window, Mustache */
 
 /*
  * Adds a "find in files" command to allow the user to find all occurances of a string in all files in
@@ -43,19 +43,23 @@ define(function (require, exports, module) {
     "use strict";
 
     var Async               = require("utils/Async"),
+        Resizer             = require("utils/Resizer"),
         CommandManager      = require("command/CommandManager"),
         Commands            = require("command/Commands"),
         Strings             = require("strings"),
         StringUtils         = require("utils/StringUtils"),
         ProjectManager      = require("project/ProjectManager"),
         DocumentManager     = require("document/DocumentManager"),
         EditorManager       = require("editor/EditorManager"),
+        PanelManager        = require("view/PanelManager"),
         FileIndexManager    = require("project/FileIndexManager"),
         FileUtils           = require("file/FileUtils"),
         KeyEvent            = require("utils/KeyEvent"),
         AppInit             = require("utils/AppInit"),
         StatusBar           = require("widgets/StatusBar"),
         ModalBar            = require("widgets/ModalBar").ModalBar;
+
+    var searchResultsTemplate = require("text!htmlContent/search-results.html");
 
     var searchResults = [];
 
@@ -64,8 +68,8 @@ define(function (require, exports, module) {
         currentQuery = "",
         currentScope;
 
-    // Div holding the search results. Initialized in htmlReady().
-    var $searchResultsDiv;
+    // Bottom panel holding the search results. Initialized in htmlReady().
+    var searchResultsPanel;
 
     function _getQueryRegExp(query) {
         // Clear any pending RegEx error message
@@ -193,9 +197,8 @@ define(function (require, exports, module) {
     };
 
     function _hideSearchResults() {
-        if ($searchResultsDiv.is(":visible")) {
-            $searchResultsDiv.hide();
-            EditorManager.resizeEditor();
+        if (searchResultsPanel.isVisible()) {
+            searchResultsPanel.hide();
         }
     }
 
@@ -340,12 +343,10 @@ define(function (require, exports, module) {
                     _hideSearchResults();
                 });
 
-            $searchResultsDiv.show();
+            searchResultsPanel.show();
         } else {
             _hideSearchResults();
         }
-
-        EditorManager.resizeEditor();
     }
 
     /**
@@ -444,11 +445,12 @@ define(function (require, exports, module) {
 
     // Initialize items dependent on HTML DOM
     AppInit.htmlReady(function () {
-        $searchResultsDiv  = $("#search-results");
+        var panelHtml = Mustache.render(searchResultsTemplate, Strings);
+        searchResultsPanel = PanelManager.createBottomPanel("find-in-files.results", $(panelHtml));
     });
 
     function _fileNameChangeHandler(event, oldName, newName) {
-        if ($searchResultsDiv.is(":visible")) {
+        if (searchResultsPanel.isVisible()) {
             // Update the search results
             searchResults.forEach(function (item) {
                 item.fullPath = item.fullPath.replace(oldName, newName);
@@ -458,7 +460,7 @@ define(function (require, exports, module) {
     }
 
     function _pathDeletedHandler(event, path) {
-        if ($searchResultsDiv.is(":visible")) {
+        if (searchResultsPanel.isVisible()) {
             // Update the search results
             searchResults.forEach(function (item, idx) {
                 if (FileUtils.isAffectedWhenRenaming(item.fullPath, path)) {