Fix for issue #1122

src/htmlContent/main-view.html

@@ -95,12 +95,15 @@
             </div>
 
             <div id="jslint-results" class="bottom-panel">
+                <div id="jslint-resizer" class="h-resizer"></div>
                 <div class="toolbar simple-toolbar-layout">
                     <div class="title">{{JSLINT_ERRORS}}</div>
                 </div>
                 <div class="table-container"></div>
             </div>
+
             <div id="search-results" class="bottom-panel">
+                <div id="search-resizer" class="h-resizer"></div>
                 <div class="toolbar simple-toolbar-layout">
                     <div class="title">{{SEARCH_RESULTS}}</div>
                     <div class="title" id="search-result-summary"></div>

src/language/JSLintUtils.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, JSLINT, PathUtils */
+/*global define, $, JSLINT, PathUtils, document, window */
 
 /**
  * Allows JSLint to run on the current document and report results in a UI panel.
@@ -44,8 +44,22 @@ define(function (require, exports, module) {
         EditorManager           = require("editor/EditorManager"),
         PreferencesManager      = require("preferences/PreferencesManager"),
         PerfUtils               = require("utils/PerfUtils"),
-        Strings                 = require("strings");
+        Strings                 = require("strings"),
+        AppInit                 = require("utils/AppInit");
 
+    var MIN_HEIGHT = 100;
+
+    var PREFERENCES_CLIENT_ID = module.id,
+        defaultPrefs = { height: 200, enabled: true };
+
+    // These vars are initialized by the htmlReady handler
+    // below since they refer to DOM elements
+    var $mainView,
+        $jslintResults,
+        $jslintContent,
+        $jslintToolbar,
+        $jslintResizer;
+
     /**
      * @private
      * @type {PreferenceStorage}
@@ -200,14 +214,101 @@ define(function (require, exports, module) {
         setEnabled(!getEnabled());
     }
 
+    /**
+     * @private
+     * Sets jslint panel height and resizes editor.
+     * @param {number} height Height in pixels.
+     */
+    function _setHeight(height) {
+        // There seems to be a race condition when accessing height if JSLint is
+        // enabled when Brackets is opening. Neither htmlReady nor appReady seem 
+        // to work for that. Forcing 27px height for the toolbar in that case.
+        var toolbarHeight = $jslintToolbar.outerHeight(true);
+        if (!$jslintToolbar.height()) {
+            toolbarHeight = 27;
+        }
+
+        height = Math.max(height, MIN_HEIGHT);
+        _prefs.setValue("height", height);
+
+        $jslintResults.height(height);
+        $jslintContent.height(height - toolbarHeight);
+
+        EditorManager.resizeEditor();
+    }
+
+    /**
+     * @private
+     * Initialize resize handling.
+     */
+    function _initJSLintResizer() {
+        var $body                   = $(document.body),
+            animationRequest        = null,
+            isMouseDown             = false;
+
+        if (_enabled) {
+            _setHeight(_prefs.getValue("height"));
+        }
+
+        $jslintResizer.on("mousedown.jslint", function (e) {
+            var startY = e.clientY,
+                startHeight = $jslintResults.height(),
+                newHeight = startHeight + (startY - e.clientY),
+                doResize = true;
+
+            isMouseDown = true;
+            $body.toggleClass("hor-resizing");
+
+            animationRequest = window.webkitRequestAnimationFrame(function doRedraw() {
+                // only run this if the mouse is down so we don't constantly loop even 
+                // after we're done resizing.
+                if (!isMouseDown) {
+                    return;
+                }
+
+                if (doResize) {
+                    _setHeight(newHeight);
+                }
+
+                animationRequest = window.webkitRequestAnimationFrame(doRedraw);
+            });
+
+            $mainView.on("mousemove.jslint", function (e) {
+                // calculate newHeight as difference between stargint and current
+                // position to avoid dependencies with other panels
+                newHeight = startHeight + (startY - e.clientY);
+                e.preventDefault();
+            });
+
+            $mainView.one("mouseup.jslint", function (e) {
+                isMouseDown = false;
+                $mainView.off("mousemove.jslint");
+                $body.toggleClass("hor-resizing");
+            });
+
+            e.preventDefault();
+        });
+    }
 
     // Register command handlers
     CommandManager.register(Strings.CMD_JSLINT, Commands.TOGGLE_JSLINT, _handleToggleJSLint);
 
     // Init PreferenceStorage
-    _prefs = PreferencesManager.getPreferenceStorage(module.id, { enabled: !!brackets.config.enable_jslint });
+    _prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs);
     _setEnabled(_prefs.getValue("enabled"));
 
+    // Initialize items dependent on HTML DOM
+    AppInit.htmlReady(function () {
+        $mainView       = $(".main-view");
+        $jslintResults  = $("#jslint-results");
+        $jslintResizer  = $("#jslint-resizer");
+        $jslintToolbar  = $("#jslint-results .toolbar");
+        $jslintContent  = $("#jslint-results .table-container");
+
+        // init
+        _initJSLintResizer();
+    });
+
     // Define public API
     exports.run = run;
     exports.getEnabled = getEnabled;

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, document */
 
 /*
  * Adds a "find in files" command to allow the user to find all occurances of a string in all files in
@@ -50,11 +50,25 @@ define(function (require, exports, module) {
         DocumentManager     = require("document/DocumentManager"),
         EditorManager       = require("editor/EditorManager"),
         FileIndexManager    = require("project/FileIndexManager"),
+        AppInit             = require("utils/AppInit"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
         KeyEvent            = require("utils/KeyEvent");
-
 
     var FIND_IN_FILES_MAX = 100;
 
+    var MIN_HEIGHT = 100;
+
+    var PREFERENCES_CLIENT_ID = module.id,
+        defaultPrefs = { height: 200 };
+
+    // These vars are initialized by the htmlReady handler
+    // below since they refer to DOM elements
+    var $mainView,
+        $searchResults,
+        $searchContent,
+        $searchToolbar,
+        $searchResizer;
+
     // This dialog class was mostly copied from QuickOpen. We should have a common dialog
     // class that everyone can use.
 
@@ -332,6 +346,85 @@ define(function (require, exports, module) {
                 }
             });
     }
+
+    /**
+     * @private
+     * Sets jslint panel height and resizes editor.
+     * @param {number} height Height in pixels.
+     */
+    function _setHeight(height) {
+        var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs);
+
+        height = Math.max(height, MIN_HEIGHT);
+
+        $searchResults.height(height);
+        $searchContent.height(height - $searchToolbar.outerHeight());
+
+        prefs.setValue("height", height);
+        EditorManager.resizeEditor();
+    }
+
+    /**
+     * @private
+     * Install resize handling.
+     */
+    function _initSearchResizer() {
+        var $body                   = $(document.body),
+            prefs                   = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
+            animationRequest        = null,
+            isMouseDown             = false;
+
+        $searchResizer.on("mousedown.search", function (e) {
+            var startY = e.clientY,
+                startHeight = $searchResults.height(),
+                newHeight = startHeight + (startY - e.clientY),
+                doResize = true;
+
+            isMouseDown = true;
+            $body.toggleClass("hor-resizing");
+
+            animationRequest = window.webkitRequestAnimationFrame(function doRedraw() {
+                // only run this if the mouse is down so we don't constantly loop even 
+                // after we're done resizing.
+                if (!isMouseDown) {
+                    return;
+                }
+
+                if (doResize) {
+                    _setHeight(newHeight);
+                }
+
+                animationRequest = window.webkitRequestAnimationFrame(doRedraw);
+            });
+
+            $mainView.on("mousemove.search", function (e) {
+                // calculate newHeight as difference between stargint and current
+                // position to avoid dependencies with other panels
+                newHeight = startHeight + (startY - e.clientY);
+                e.preventDefault();
+            });
+
+            $mainView.one("mouseup.search", function (e) {
+                isMouseDown = false;
+                $mainView.off("mousemove.search");
+                $body.toggleClass("hor-resizing");
+            });
+
+            e.preventDefault();
+        });
+    }
 
     CommandManager.register(Strings.CMD_FIND_IN_FILES,  Commands.EDIT_FIND_IN_FILES,    doFindInFiles);
-});
+
+    // Initialize items dependent on HTML DOM
+    AppInit.htmlReady(function () {
+        $mainView       = $(".main-view");
+        $searchResults  = $("#search-results");
+        $searchResizer  = $("#search-resizer");
+        $searchToolbar  = $("#search-results .toolbar");
+        $searchContent  = $("#search-results .table-container");
+
+        // init
+        _initSearchResizer();
+    });
+});

src/styles/brackets.less

@@ -67,6 +67,12 @@ body {
     &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
         cursor: col-resize;   
     }
+
+    /* This appears to be necessary in Firefox when body is set to display: box. */
+    height: 100%;
+    &.hor-resizing a, &.hor-resizing #projects a, &.hor-resizing .main-view, &.hor-resizing .CodeMirror-lines {
+        cursor: row-resize;   
+    }
 }
 
 
@@ -116,6 +122,15 @@ a, img {
     border-width: 1px;
     border-color: lighten(@bc-grey, @bc-color-step-size*4);
 
+    .h-resizer {
+        position: absolute;
+        height: 6px;
+        width: 100%;
+        z-index: @z-index-brackets-bottom-resizer;
+        opacity: 0;
+        cursor: row-resize;
+    }
+
     .toolbar {
         height: auto;
         padding-top: @base-padding / 2;

src/styles/brackets_variables.less

@@ -50,5 +50,6 @@
 
 @z-index-brackets-sidebar-resizer: @z-index-brackets-ui + 2;
 @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1;
+@z-index-brackets-bottom-resizer: @z-index-brackets-ui + 2;
 
 @z-index-brackets-context-menu-base:    1000;