Merge pull request #1661 from jbalsas/jslint-panel-resize

Fix for issue #1122

Author: redmunds

src/brackets.js

@@ -91,6 +91,7 @@ define(function (require, exports, module) {
         UrlParams               = require("utils/UrlParams").UrlParams,
         NativeFileSystem        = require("file/NativeFileSystem").NativeFileSystem,
         PreferencesManager      = require("preferences/PreferencesManager"),
+        Resizer                 = require("utils/Resizer"),
         StatusBar               = require("widgets/Statusbar");
 
     // Local variables

src/htmlContent/main-view.html

@@ -90,19 +90,20 @@
                 </div>
             </div>
 
-            <div id="jslint-results" class="bottom-panel">
+            <div id="jslint-results" class="bottom-panel vert-resizable top-resizer">
                 <div class="toolbar simple-toolbar-layout">
                     <div class="title">{{JSLINT_ERRORS}}</div>
                 </div>
-                <div class="table-container"></div>
+                <div class="table-container resizable-content"></div>
             </div>
-            <div id="search-results" class="bottom-panel">
+            
+            <div id="search-results" class="bottom-panel vert-resizable top-resizer">
                 <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"></div>
+                <div class="table-container resizable-content"></div>
             </div>
 
             <div id="status-bar" class="statusbar">

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 */
 
 /**
  * Allows JSLint to run on the current document and report results in a UI panel.
@@ -47,7 +47,15 @@ define(function (require, exports, module) {
         Strings                 = require("strings"),
         StringUtils             = require("utils/StringUtils"),
         AppInit                 = require("utils/AppInit"),
+        Resizer                 = require("utils/Resizer"),
         StatusBar               = require("widgets/StatusBar");
+        
+    var PREFERENCES_CLIENT_ID = module.id,
+        defaultPrefs = { height: 200, enabled: true };
+    
+    /** @type {Number} Height of the JSLint panel header in pixels. Hardcoded to avoid race 
+                       condition when measuring it on htmlReady*/
+    var HEADER_HEIGHT = 27;
 
     /**
      * @private
@@ -212,20 +220,33 @@ define(function (require, exports, module) {
         setEnabled(!getEnabled());
     }
 
-    
     // 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"));
 
-    // Init StatusBar indicator
+    // Initialize items dependent on HTML DOM
     AppInit.htmlReady(function () {
+        var height          = Math.max(_prefs.getValue("height"), 100),
+            $jslintResults  = $("#jslint-results"),
+            $jslintContent  = $("#jslint-results .table-container");
+
+        $jslintResults.height(height);
+        $jslintContent.height(height - HEADER_HEIGHT);
+        
+        if (_enabled) {
+            EditorManager.resizeEditor();
+        }
+        
+        $jslintResults.on("panelResizeEnd", function (event, height) {
+            _prefs.setValue("height", height);
+        });
+        
         StatusBar.addIndicator(module.id, $("#gold-star"), false);
     });
-    
-    
+
     // Define public API
     exports.run = run;
     exports.getEnabled = getEnabled;

src/search/FindInFiles.js

@@ -50,13 +50,23 @@ define(function (require, exports, module) {
         DocumentManager     = require("document/DocumentManager"),
         EditorManager       = require("editor/EditorManager"),
         FileIndexManager    = require("project/FileIndexManager"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
         KeyEvent            = require("utils/KeyEvent"),
+        AppInit             = require("utils/AppInit"),
+        Resizer             = require("utils/Resizer"),
         StatusBar           = require("widgets/StatusBar");
 
     var searchResults = [];
 
     var FIND_IN_FILES_MAX = 100;
-
+    
+    var PREFERENCES_CLIENT_ID = module.id,
+        defaultPrefs = { height: 200 };
+    
+    /** @type {Number} Height of the FIF panel header in pixels. Hardcoded to avoid race 
+                       condition when measuring it on htmlReady*/
+    var HEADER_HEIGHT = 27;
+    
     // This dialog class was mostly copied from QuickOpen. We should have a common dialog
     // class that everyone can use.
 
@@ -340,6 +350,21 @@ define(function (require, exports, module) {
                 }
             });
     }
+    
+    // Initialize items dependent on HTML DOM
+    AppInit.htmlReady(function () {
+        var $searchResults  = $("#search-results"),
+            $searchContent  = $("#search-results .table-container"),
+            prefs           = PreferencesManager.getPreferenceStorage(module.id, defaultPrefs),
+            height          = prefs.getValue("height");
+
+        $searchResults.height(height);
+        $searchContent.height(height - HEADER_HEIGHT);
+        
+        $searchResults.on("panelResizeEnd", function (event, height) {
+            prefs.setValue("height", height);
+        });
+    });
 
     function _fileNameChangeHandler(event, oldName, newName) {
         if ($("#search-results").is(":visible")) {
@@ -353,4 +378,4 @@ define(function (require, exports, module) {
 
     $(DocumentManager).on("fileNameChange", _fileNameChangeHandler);
     CommandManager.register(Strings.CMD_FIND_IN_FILES,  Commands.EDIT_FIND_IN_FILES,    doFindInFiles);
-});
+});

src/styles/brackets.less

@@ -62,11 +62,13 @@ html, body {
 body {
     .vbox;
 
-    /* This appears to be necessary in Firefox when body is set to display: box. */
-    width: 100%;
     &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
         cursor: col-resize;   
     }
+    
+    &.vert-resizing a, &.vert-resizing #projects a, &.vert-resizing .main-view, &.vert-resizing .CodeMirror-lines {
+        cursor: row-resize;   
+    }
 }
 
 
@@ -180,14 +182,32 @@ a, img {
         background: @background-color-2 url('images/no_content_bg.svg') no-repeat center 45%;
     }
 }
-    
+
+.vert-resizer {
+    position: absolute;
+    height: 6px;
+    width: 100%;
+    z-index: @z-index-brackets-panel-resizer;
+    opacity: 0;
+    cursor: row-resize;
+}
+
+.horz-resizer {
+    position: absolute;
+    height: 100%;
+    width: 6px;
+    z-index: @z-index-brackets-panel-resizer;
+    opacity: 0;
+    cursor: col-resize;
+}
+
 .bottom-panel {
     display: none;
     height: 200px;
     border-top-style: solid;
     border-width: 1px;
     border-color: lighten(@bc-grey, @bc-color-step-size*4);
-
+    
     .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-panel-resizer: @z-index-brackets-ui + 2;
 
 @z-index-brackets-context-menu-base:    1000;