From 6d4e21c66b4d507a17e91e574514a1802f5df03e Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Tue, 9 Oct 2012 21:29:28 +0200
Subject: [PATCH 01/10] Initial sidebar resizing

---
 src/htmlContent/main-view.html |  6 +++---
 src/project/SidebarView.js     |  7 ++++++-
 src/styles/brackets.less       |  2 +-
 src/utils/Resizer.js           | 22 +++++++++++++++-------
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
index 8380f4f0c64..2667f7a884a 100644
--- a/src/htmlContent/main-view.html
+++ b/src/htmlContent/main-view.html
@@ -40,12 +40,12 @@
 
 <!-- Main UI -->
     <div class="main-view">
-        <div id="sidebar-resizer"></div>
-        <div id="sidebar" class="sidebar quiet-scrollbars">
+        <!--<div id="sidebar-resizer"></div>-->
+        <div id="sidebar" class="sidebar quiet-scrollbars horz-resizable right-resizer">
             <!-- Left-hand 'Project panel' -->
             <div id="projects" class="panel">
                 <div id="project-header"></div>
-                <div id="file-section">
+                <div id="file-section" class="content-resizable">
                     <div id="open-files-container">
                         <!-- This will contain a dynamically generated <ul> at runtime -->
                         <ul>
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 9ae9b74c4c0..8331a78e76a 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -243,6 +243,9 @@ define(function (require, exports, module) {
 
     // Initialize items dependent on HTML DOM
     AppInit.htmlReady(function () {
+        var prefs           = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
+            sidebarWidth    = prefs.getValue("sidebarWidth");
+            
         $sidebar                = $("#sidebar");
         $sidebarMenuText        = $("#menu-view-hide-sidebar span");
         $sidebarResizer         = $("#sidebar-resizer");
@@ -252,7 +255,9 @@ define(function (require, exports, module) {
 
         // init
         WorkingSetView.create($openFilesContainer);
-        _initSidebarResizer();
+        //_initSidebarResizer();
+        
+        $sidebar.trigger("resize");
     });
     
     $(ProjectManager).on("projectOpen", _updateProjectTitle);
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 37aa9b222dd..621fecc20ca 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -62,7 +62,7 @@ html, body {
 body {
     .vbox;
     
-    &.resizing a, &.resizing #projects a, &.resizing .main-view, &.resizing .CodeMirror-lines {
+    &.horz-resizing a, &.horz-resizing #projects a, &.horz-resizing .main-view, &.horz-resizing .CodeMirror-lines {
         cursor: col-resize;   
     }
     
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index c380034d48a..07fedafc27a 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -92,12 +92,18 @@ define(function (require, exports, module) {
             animationRequest    = null,
             directionProperty   = direction === DIRECTION_HORIZONTAL ? "clientX" : "clientY",
             elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height,
-            contentSizeFunction = null;
-                
+            directionIncrement  = position === POSITION_TOP ? 1 : -1,
+            contentSizeFunction = null,
+            resizerCSSPosition  = "left";
+
         minSize = minSize || 0;
             
         $element.prepend($resizer);
         
+        $element.resize(function () {
+            $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - 1);
+        });
+        
         $resizer.on("mousedown", function (e) {
             var startPosition   = e[directionProperty],
                 startSize       = elementSizeFunction.apply($element),
@@ -105,7 +111,9 @@ define(function (require, exports, module) {
                 baseSize        = 0,
                 doResize        = true,
                 isMouseDown     = true;
-                        
+            
+            $element.trigger("panelResizeStart", [elementSizeFunction.apply($element)]);
+            
             if ($resizableElement !== undefined) {
                 $element.children().not(".horz-resizer, .vert-resizer, .resizable-content").each(function (index, child) {
                     if (direction === DIRECTION_HORIZONTAL) {
@@ -146,7 +154,7 @@ define(function (require, exports, module) {
             $mainView.on("mousemove", function (e) {
                 // calculate newSize adding to startSize the difference
                 // between starting and current position, capped at minSize
-                newSize = Math.max(startSize + (startPosition - e[directionProperty]), minSize);
+                newSize = Math.max(startSize + directionIncrement * (startPosition - e[directionProperty]), minSize);
                 e.preventDefault();
             });
             
@@ -187,9 +195,9 @@ define(function (require, exports, module) {
             //    makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_SIZE);
             //}
 
-            //if ($(element).hasClass("right-resizer")) {
-            //    makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_SIZE);
-            //}
+            if ($(element).hasClass("right-resizer")) {
+                makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_SIZE);
+            }
         });
     });
     

From b1cb8f2b5228f6d1ed6532e2303f1735b2cf199f Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Tue, 9 Oct 2012 22:35:57 +0200
Subject: [PATCH 02/10] Resizes shadow and triangle selection

---
 src/project/SidebarView.js | 69 ++++++++++----------------------------
 src/utils/Resizer.js       | 16 ++++++---
 2 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 8331a78e76a..1777fe46846 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -143,9 +143,7 @@ define(function (require, exports, module) {
             startingSidebarPosition = sidebarWidth,
             animationRequest        = null,
             isMouseDown             = false;
-        
-        $sidebarResizer.css("left", sidebarWidth - 1);
-        
+                
         if (prefs.getValue("sidebarClosed")) {
             toggleSidebar(sidebarWidth);
         } else {
@@ -163,16 +161,6 @@ define(function (require, exports, module) {
             }
         });
         $sidebarResizer.on("mousedown.sidebar", function (e) {
-            var startX = e.clientX,
-                newWidth = Math.max(e.clientX, 0),
-                doResize = true;
-            
-            isMouseDown = true;
-
-            // take away the shadows (for performance reasons during sidebarmovement)
-            $sidebar.find(".scroller-shadow").css("display", "none");
-            
-            $body.toggleClass("resizing");
             
             // check to see if we're currently in hidden mode
             if (isSidebarClosed) {
@@ -180,13 +168,7 @@ define(function (require, exports, module) {
             }
                         
             
-            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;
-                }
-                    
+            animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { 
                 // if we've gone below 10 pixels on a mouse move, and the
                 // sidebar is shrinking, hide the sidebar automatically an
                 // unbind the mouse event. 
@@ -206,38 +188,7 @@ define(function (require, exports, module) {
                     isMouseDown = false;
                         
                 }
-                
-                if (doResize) {
-                    // for right now, displayTriangle is always going to be false for _setWidth
-                    // because we want to hide it when we move, and _setWidth only gets called
-                    // on mousemove now.
-                    _setWidth(newWidth, false, false);
-                }
-                
-                animationRequest = window.webkitRequestAnimationFrame(doRedraw);
             });
-            
-            $mainView.on("mousemove.sidebar", function (e) {
-                newWidth = Math.max(e.clientX, 0);
-                
-                e.preventDefault();
-            });
-                
-            $mainView.one("mouseup.sidebar", function (e) {
-                isMouseDown = false;
-                
-                // replace shadows and triangle
-                $sidebar.find(".sidebar-selection-triangle").css("display", "block");
-                $sidebar.find(".scroller-shadow").css("display", "block");
-                
-                $projectFilesContainer.triggerHandler("scroll");
-                $openFilesContainer.triggerHandler("scroll");
-                $mainView.off("mousemove.sidebar");
-                $body.toggleClass("resizing");
-                startingSidebarPosition = $sidebar.width();
-            });
-            
-            e.preventDefault();
         });
     }
 
@@ -257,6 +208,22 @@ define(function (require, exports, module) {
         WorkingSetView.create($openFilesContainer);
         //_initSidebarResizer();
         
+        $sidebar.on("panelResizeStart", function (evt, width) {
+            $sidebar.find(".sidebar-selection-triangle").css("display", "none");
+            $sidebar.find(".scroller-shadow").css("display", "none");
+        });
+        
+        $sidebar.on("panelResizeUpdate", function (evt, width) {
+            $sidebar.find(".sidebar-selection").width(width);
+        });
+        
+        $sidebar.on("panelResizeEnd", function (evt, width) {
+            $sidebar.find(".sidebar-selection-triangle").css("display", "block").css("left", width);
+            $sidebar.find(".scroller-shadow").css("display", "block");
+            $projectFilesContainer.triggerHandler("scroll");
+            $openFilesContainer.triggerHandler("scroll");
+        });
+        
         $sidebar.trigger("resize");
     });
     
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 07fedafc27a..dd1719efd43 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -92,7 +92,7 @@ define(function (require, exports, module) {
             animationRequest    = null,
             directionProperty   = direction === DIRECTION_HORIZONTAL ? "clientX" : "clientY",
             elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height,
-            directionIncrement  = position === POSITION_TOP ? 1 : -1,
+            directionIncrement  = (position === POSITION_TOP || position === POSITION_LEFT) ? 1 : -1,
             contentSizeFunction = null,
             resizerCSSPosition  = "left";
 
@@ -100,9 +100,11 @@ define(function (require, exports, module) {
             
         $element.prepend($resizer);
         
-        $element.resize(function () {
-            $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - 1);
-        });
+        if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
+            $element.resize(function () {
+                $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+            });
+        }
         
         $resizer.on("mousedown", function (e) {
             var startPosition   = e[directionProperty],
@@ -155,6 +157,7 @@ define(function (require, exports, module) {
                 // calculate newSize adding to startSize the difference
                 // between starting and current position, capped at minSize
                 newSize = Math.max(startSize + directionIncrement * (startPosition - e[directionProperty]), minSize);
+                $element.trigger("panelResizeUpdate", [newSize]);
                 e.preventDefault();
             });
             
@@ -163,6 +166,11 @@ define(function (require, exports, module) {
                     isMouseDown = false;
                     $mainView.off("mousemove");
                     $body.toggleClass(direction + "-resizing");
+                    
+                    if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
+                        $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+                    }
+                    
                     $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
                 }
             }

From 12b399cfaafe9109a4bbe775416ffc44926e4a73 Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Tue, 9 Oct 2012 22:48:43 +0200
Subject: [PATCH 03/10] Add end handler to save width preference

---
 src/project/SidebarView.js | 57 ++++++++++++++++++++------------------
 src/utils/Resizer.js       |  3 +-
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 1777fe46846..7b85f75bb94 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -136,20 +136,39 @@ define(function (require, exports, module) {
      * Install sidebar resize handling.
      */
     function _initSidebarResizer() {
-        var $mainView               = $(".main-view"),
-            $body                   = $(document.body),
-            prefs                   = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
-            sidebarWidth            = prefs.getValue("sidebarWidth"),
-            startingSidebarPosition = sidebarWidth,
-            animationRequest        = null,
-            isMouseDown             = false;
-                
+        var prefs                   = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
+            sidebarWidth            = prefs.getValue("sidebarWidth");
+        
+        $sidebar.on("panelResizeStart", function (evt, width) {
+            $sidebar.find(".sidebar-selection-triangle").css("display", "none");
+            $sidebar.find(".scroller-shadow").css("display", "none");
+        });
+        
+        $sidebar.on("panelResizeUpdate", function (evt, width) {
+            $sidebar.find(".sidebar-selection").width(width);
+        });
+        
+        $sidebar.on("panelResizeEnd", function (evt, width) {
+            $sidebar.find(".sidebar-selection-triangle").css("display", "block").css("left", width);
+            $sidebar.find(".scroller-shadow").css("display", "block");
+            $projectFilesContainer.triggerHandler("scroll");
+            $openFilesContainer.triggerHandler("scroll");
+            
+            prefs.setValue("sidebarWidth", width);
+        });
+        
+        // Set initial state
         if (prefs.getValue("sidebarClosed")) {
             toggleSidebar(sidebarWidth);
         } else {
-            _setWidth(sidebarWidth, true, true);
+            $sidebar.width(sidebarWidth);
         }
         
+        $sidebar.trigger("resize");
+        
+        /*
+
+        
         $sidebarResizer.on("dblclick", function () {
             if ($sidebar.width() < 10) {
                 //mousedown is fired first. Sidebar is already toggeled open to at least 10px.
@@ -190,6 +209,7 @@ define(function (require, exports, module) {
                 }
             });
         });
+        */
     }
 
     // Initialize items dependent on HTML DOM
@@ -206,25 +226,8 @@ define(function (require, exports, module) {
 
         // init
         WorkingSetView.create($openFilesContainer);
-        //_initSidebarResizer();
-        
-        $sidebar.on("panelResizeStart", function (evt, width) {
-            $sidebar.find(".sidebar-selection-triangle").css("display", "none");
-            $sidebar.find(".scroller-shadow").css("display", "none");
-        });
-        
-        $sidebar.on("panelResizeUpdate", function (evt, width) {
-            $sidebar.find(".sidebar-selection").width(width);
-        });
-        
-        $sidebar.on("panelResizeEnd", function (evt, width) {
-            $sidebar.find(".sidebar-selection-triangle").css("display", "block").css("left", width);
-            $sidebar.find(".scroller-shadow").css("display", "block");
-            $projectFilesContainer.triggerHandler("scroll");
-            $openFilesContainer.triggerHandler("scroll");
-        });
+        _initSidebarResizer();
         
-        $sidebar.trigger("resize");
     });
     
     $(ProjectManager).on("projectOpen", _updateProjectTitle);
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index dd1719efd43..888c8cf38e4 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -94,7 +94,8 @@ define(function (require, exports, module) {
             elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height,
             directionIncrement  = (position === POSITION_TOP || position === POSITION_LEFT) ? 1 : -1,
             contentSizeFunction = null,
-            resizerCSSPosition  = "left";
+            resizerCSSPosition  = "left",
+            toggleSize          = 0;
 
         minSize = minSize || 0;
             

From 8c0c38ba3e4383f9020931672af10d1ac1758b58 Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Tue, 9 Oct 2012 23:48:13 +0200
Subject: [PATCH 04/10] Initial panel toggle

---
 src/htmlContent/main-view.html |  2 +-
 src/project/SidebarView.js     | 10 ++++++++-
 src/utils/Resizer.js           | 41 +++++++++++++++++++++++++++++-----
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
index 2667f7a884a..1e8f1bc3e0b 100644
--- a/src/htmlContent/main-view.html
+++ b/src/htmlContent/main-view.html
@@ -41,7 +41,7 @@
 <!-- Main UI -->
     <div class="main-view">
         <!--<div id="sidebar-resizer"></div>-->
-        <div id="sidebar" class="sidebar quiet-scrollbars horz-resizable right-resizer">
+        <div id="sidebar" class="sidebar quiet-scrollbars horz-resizable right-resizer collapsable">
             <!-- Left-hand 'Project panel' -->
             <div id="projects" class="panel">
                 <div id="project-header"></div>
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 7b85f75bb94..522295c2406 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -157,11 +157,19 @@ define(function (require, exports, module) {
             prefs.setValue("sidebarWidth", width);
         });
         
+        $sidebar.on("panelCollapsed", function () {
+            console.log("COLLAPSE!!!");
+        });
+        
+        $sidebar.on("panelExpanded", function () {
+            console.log("EXPAND!!!");
+        });
+        
         // Set initial state
         if (prefs.getValue("sidebarClosed")) {
             toggleSidebar(sidebarWidth);
         } else {
-            $sidebar.width(sidebarWidth);
+            $sidebar.width(400);
         }
         
         $sidebar.trigger("resize");
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 888c8cf38e4..06422f58894 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -107,6 +107,24 @@ define(function (require, exports, module) {
             });
         }
         
+        // A value of 0 for minSize implies that the panel is collapsable
+        if (!minSize) {
+            $resizer.on("dblclick", function () {
+                if ($element.is(":visible")) {
+                    $element.hide();
+                    $resizer.insertBefore($element).css("left", 5);
+                    $element.trigger("panelCollapsed");
+                } else {
+                    $element.show();
+                    $element.prepend($resizer);
+                    $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+                    $element.trigger("panelExpanded");
+                }
+                
+                EditorManager.resizeEditor();
+            });
+        }
+        
         $resizer.on("mousedown", function (e) {
             var startPosition   = e[directionProperty],
                 startSize       = elementSizeFunction.apply($element),
@@ -168,11 +186,13 @@ define(function (require, exports, module) {
                     $mainView.off("mousemove");
                     $body.toggleClass(direction + "-resizing");
                     
-                    if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
-                        $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+                    if ($element.is(":visible")) {
+                        if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
+                            $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+                        }
+                        
+                        $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
                     }
-                    
-                    $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
                 }
             }
             
@@ -185,12 +205,17 @@ define(function (require, exports, module) {
     
     // Scan DOM for horz-resizable and vert-resizable classes and make them resizable
     AppInit.htmlReady(function () {
+        var minSize = DEFAULT_MIN_SIZE;
         $mainView = $(".main-view");
         
         $(".vert-resizable").each(function (index, element) {
             
+            if ($(element).hasClass("collapsable")) {
+                minSize = 0;
+            }
+            
             if ($(element).hasClass("top-resizer")) {
-                makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, DEFAULT_MIN_SIZE);
+                makeResizable(element, DIRECTION_VERTICAL, POSITION_TOP, minSize);
             }
             
             //if ($(element).hasClass("bottom-resizer")) {
@@ -200,12 +225,16 @@ define(function (require, exports, module) {
         
         $(".horz-resizable").each(function (index, element) {
             
+            if ($(element).hasClass("collapsable")) {
+                minSize = 0;
+            }
+            
             //if ($(element).hasClass("left-resizer")) {
             //    makeResizable(element, DIRECTION_HORIZONTAL, POSITION_LEFT, DEFAULT_MIN_SIZE);
             //}
 
             if ($(element).hasClass("right-resizer")) {
-                makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, DEFAULT_MIN_SIZE);
+                makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, minSize);
             }
         });
     });

From f88be8fbf878b032a643f33ea98898c30ea27483 Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 00:40:09 +0200
Subject: [PATCH 05/10] Add support for toggling an element

---
 src/project/SidebarView.js | 122 ++++---------------------------------
 src/utils/Resizer.js       |  44 +++++++++----
 2 files changed, 43 insertions(+), 123 deletions(-)

diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 522295c2406..53593dd14bc 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -42,7 +42,8 @@ define(function (require, exports, module) {
         Strings             = require("strings"),
         PreferencesManager  = require("preferences/PreferencesManager"),
         EditorManager       = require("editor/EditorManager"),
-        Global              = require("utils/Global");
+        Global              = require("utils/Global"),
+        Resizer             = require("utils/Resizer");
 
     var isSidebarClosed         = false;
 
@@ -67,68 +68,11 @@ define(function (require, exports, module) {
         $projectTitle.attr("title", ProjectManager.getProjectRoot().fullPath);
     }
     
-    /**
-     * @private
-     * Sets sidebar width and resizes editor. Does not change internal sidebar open/closed state.
-     * @param {number} width Optional width in pixels. If null or undefined, the default width is used.
-     * @param {!boolean} updateMenu Updates "View" menu label to indicate current sidebar state.
-     * @param {!boolean} displayTriangle Display selection marker triangle in the active view.
-     */
-    function _setWidth(width, updateMenu, displayTriangle) {
-        // if we specify a width with the handler call, use that. Otherwise use
-        // the greater of the current width or 200 (200 is the minimum width we'd snap back to)
-        
-        var prefs                   = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs),
-            sidebarWidth            = Math.max(prefs.getValue("sidebarWidth"), 10);
-        
-        width = width || Math.max($sidebar.width(), sidebarWidth);
-        
-        if (typeof displayTriangle === "boolean") {
-            var display = (displayTriangle) ? "block" : "none";
-            $sidebar.find(".sidebar-selection-triangle").css("display", display);
-        }
-        
-        if (isSidebarClosed) {
-            $sidebarResizer.css("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. 
-            $sidebar.find(".sidebar-selection").width(width);
-            
-            if (width > 10) {
-                prefs.setValue("sidebarWidth", width);
-            }
-        }
-        
-        if (updateMenu) {
-            var text = (isSidebarClosed) ? Strings.CMD_SHOW_SIDEBAR : Strings.CMD_HIDE_SIDEBAR;
-            CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(text);
-        }
-        EditorManager.resizeEditor();
-    }
-    
     /**
      * Toggle sidebar visibility.
      */
     function toggleSidebar(width) {
-        if (isSidebarClosed) {
-            $sidebar.show();
-            $(exports).triggerHandler("show");
-        } else {
-            $sidebar.hide();
-            $(exports).triggerHandler("hide");
-        }
-        
-        isSidebarClosed = !isSidebarClosed;
-        
-        var prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, defaultPrefs);
-        prefs.setValue("sidebarClosed", isSidebarClosed);
-        _setWidth(width, true, !isSidebarClosed);
+        Resizer.toggleVisibility($sidebar);
     }
     
     /**
@@ -158,66 +102,22 @@ define(function (require, exports, module) {
         });
         
         $sidebar.on("panelCollapsed", function () {
-            console.log("COLLAPSE!!!");
+            prefs.setValue("sidebarClosed", true);
+            CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(Strings.CMD_SHOW_SIDEBAR);
         });
         
         $sidebar.on("panelExpanded", function () {
-            console.log("EXPAND!!!");
+            prefs.setValue("sidebarClosed", false);
+            CommandManager.get(Commands.VIEW_HIDE_SIDEBAR).setName(Strings.CMD_HIDE_SIDEBAR);
         });
         
         // Set initial state
+        $sidebar.width(sidebarWidth);
         if (prefs.getValue("sidebarClosed")) {
-            toggleSidebar(sidebarWidth);
+            Resizer.toggleVisibility($sidebar);
         } else {
-            $sidebar.width(400);
+            $sidebar.trigger("resize");
         }
-        
-        $sidebar.trigger("resize");
-        
-        /*
-
-        
-        $sidebarResizer.on("dblclick", function () {
-            if ($sidebar.width() < 10) {
-                //mousedown is fired first. Sidebar is already toggeled open to at least 10px.
-                _setWidth(null, true, true);
-                $projectFilesContainer.triggerHandler("scroll");
-                $openFilesContainer.triggerHandler("scroll");
-            } else {
-                toggleSidebar(sidebarWidth);
-            }
-        });
-        $sidebarResizer.on("mousedown.sidebar", function (e) {
-            
-            // check to see if we're currently in hidden mode
-            if (isSidebarClosed) {
-                toggleSidebar(1);
-            }
-                        
-            
-            animationRequest = window.webkitRequestAnimationFrame(function doRedraw() { 
-                // if we've gone below 10 pixels on a mouse move, and the
-                // sidebar is shrinking, hide the sidebar automatically an
-                // unbind the mouse event. 
-                if ((startX > 10) && (newWidth < 10)) {
-                    toggleSidebar(startingSidebarPosition);
-                    $mainView.off("mousemove.sidebar");
-                        
-                    // turn off the mouseup event so that it doesn't fire twice and retoggle the 
-                    // resizing class
-                    $mainView.off("mouseup.sidebar");
-                    $body.toggleClass("resizing");
-                    doResize = false;
-                    startX = 0;
-                        
-                    // force isMouseDown so that we don't keep calling requestAnimationFrame
-                    // this keeps the sidebar from stuttering
-                    isMouseDown = false;
-                        
-                }
-            });
-        });
-        */
     }
 
     // Initialize items dependent on HTML DOM
@@ -239,7 +139,7 @@ define(function (require, exports, module) {
     });
     
     $(ProjectManager).on("projectOpen", _updateProjectTitle);
-    CommandManager.register(Strings.CMD_HIDE_SIDEBAR,       Commands.VIEW_HIDE_SIDEBAR,     toggleSidebar);
+    CommandManager.register(Strings.CMD_HIDE_SIDEBAR, Commands.VIEW_HIDE_SIDEBAR, toggleSidebar);
     
     // Define public API
     exports.toggleSidebar = toggleSidebar;
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 06422f58894..0048769614d 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -63,6 +63,16 @@ define(function (require, exports, module) {
     
     var $mainView;
     
+    /**
+     *
+     */
+    function toggleVisibility($element) {
+        var toggleFunction = $element.data("toggleVisibility");
+        if (toggleFunction) {
+            toggleFunction();
+        }
+    }
+    
     /**
      * Adds resizing capabilities to a given html element.
      *
@@ -75,7 +85,11 @@ define(function (require, exports, module) {
      *  - Left ("left") or right ("right") for horizontal resizing
      *
      * A resizable element triggers the following events while resizing:
+     *  - panelResizeStarts: When the resize starts
+     *  - panelResizeUpdate: When the resize gets updated
      *  - panelResizeEnds: When the resize ends
+     *  - panelCollapsed: When the panel gets collapsed (or hidden)
+     *  - panelExpanded: When the panel gets expanded (or shown)
      *
      * @param {DOMNode} element Html element which should be made resizable.
      * @param {string} direction The direction of the resize action. Must be "horz" or "vert".
@@ -101,6 +115,22 @@ define(function (require, exports, module) {
             
         $element.prepend($resizer);
         
+        $element.data("toggleVisibility", function () {
+            if ($element.is(":visible")) {
+                $element.hide();
+                $resizer.insertBefore($element).css("left", 5);
+                $element.trigger("panelCollapsed");
+            } else {
+                $element.show();
+                $element.prepend($resizer);
+                $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
+                $element.trigger("panelExpanded");
+                $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
+            }
+        });
+        
+        EditorManager.resizeEditor();
+        
         if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
             $element.resize(function () {
                 $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
@@ -110,18 +140,7 @@ define(function (require, exports, module) {
         // A value of 0 for minSize implies that the panel is collapsable
         if (!minSize) {
             $resizer.on("dblclick", function () {
-                if ($element.is(":visible")) {
-                    $element.hide();
-                    $resizer.insertBefore($element).css("left", 5);
-                    $element.trigger("panelCollapsed");
-                } else {
-                    $element.show();
-                    $element.prepend($resizer);
-                    $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
-                    $element.trigger("panelExpanded");
-                }
-                
-                EditorManager.resizeEditor();
+                toggleVisibility($element);
             });
         }
         
@@ -240,4 +259,5 @@ define(function (require, exports, module) {
     });
     
     exports.makeResizable = makeResizable;
+    exports.toggleVisibility = toggleVisibility;
 });
\ No newline at end of file

From b672c26a51d9bc6facdb74526f1abad6f29724de Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 01:42:41 +0200
Subject: [PATCH 06/10] Adds support for snap resize

---
 src/project/SidebarView.js |  1 +
 src/utils/Resizer.js       | 28 +++++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 53593dd14bc..98437b39632 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -93,6 +93,7 @@ define(function (require, exports, module) {
         });
         
         $sidebar.on("panelResizeEnd", function (evt, width) {
+            $sidebar.find(".sidebar-selection").width(width);
             $sidebar.find(".sidebar-selection-triangle").css("display", "block").css("left", width);
             $sidebar.find(".scroller-shadow").css("display", "block");
             $projectFilesContainer.triggerHandler("scroll");
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 0048769614d..0eaad15874d 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -95,7 +95,8 @@ define(function (require, exports, module) {
      * @param {string} direction The direction of the resize action. Must be "horz" or "vert".
      * @param {string} position The position of the resizer on the element. Can be "top" or "bottom"
      *                          for vertical resizing and "left" or "right" for horizontal resizing.
-     * @param {int} minSize Minimum size (width or height) of the element.
+     * @param {int} minSize Minimum size (width or height) of the element. A value of 0 makes the
+     *                      panel collapsable on double click on the resizer.
      */
     function makeResizable(element, direction, position, minSize) {
         
@@ -108,17 +109,23 @@ define(function (require, exports, module) {
             elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height,
             directionIncrement  = (position === POSITION_TOP || position === POSITION_LEFT) ? 1 : -1,
             contentSizeFunction = null,
-            resizerCSSPosition  = "left",
+            resizerCSSPosition  = "",
             toggleSize          = 0;
 
         minSize = minSize || 0;
-            
+        
+        switch (position) {
+        case POSITION_RIGHT:
+            resizerCSSPosition = "left";
+            break;
+        }
+        
         $element.prepend($resizer);
         
         $element.data("toggleVisibility", function () {
             if ($element.is(":visible")) {
                 $element.hide();
-                $resizer.insertBefore($element).css("left", 5);
+                $resizer.insertBefore($element).css(resizerCSSPosition, 0);
                 $element.trigger("panelCollapsed");
             } else {
                 $element.show();
@@ -127,6 +134,8 @@ define(function (require, exports, module) {
                 $element.trigger("panelExpanded");
                 $element.trigger("panelResizeEnd", [elementSizeFunction.apply($element)]);
             }
+            
+            EditorManager.resizeEditor();
         });
         
         EditorManager.resizeEditor();
@@ -146,7 +155,7 @@ define(function (require, exports, module) {
         
         $resizer.on("mousedown", function (e) {
             var startPosition   = e[directionProperty],
-                startSize       = elementSizeFunction.apply($element),
+                startSize       = $element.is(":visible") ? elementSizeFunction.apply($element) : 0,
                 newSize         = startSize,
                 baseSize        = 0,
                 doResize        = true,
@@ -185,6 +194,15 @@ define(function (require, exports, module) {
                         contentSizeFunction.apply($resizableElement, [newSize - baseSize]);
                     }
                     
+                    if (!$element.is(":visible") && newSize > 10) {
+                        toggleVisibility($element);
+                        $element.trigger("panelResizeStart", [elementSizeFunction.apply($element)]);
+                    }
+                    
+                    if ($element.is(":visible") && newSize < 10) {
+                        toggleVisibility($element);
+                    }
+                    
                     EditorManager.resizeEditor();
                 }
                 

From 9169b270a2419c5837e55e2b9fcbfc38658fe1ff Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 02:14:05 +0200
Subject: [PATCH 07/10] Fix sidebar handler on codemirror gutter space

---
 src/styles/brackets.less |  4 ++--
 src/utils/Resizer.js     | 25 +++++++++++++------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 621fecc20ca..3871c663676 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -62,11 +62,11 @@ html, body {
 body {
     .vbox;
     
-    &.horz-resizing a, &.horz-resizing #projects a, &.horz-resizing .main-view, &.horz-resizing .CodeMirror-lines {
+    &.horz-resizing a, &.horz-resizing #projects a, &.horz-resizing .main-view, &.horz-resizing .CodeMirror-lines, &.horz-resizing .CodeMirror-gutter-text {
         cursor: col-resize;   
     }
     
-    &.vert-resizing a, &.vert-resizing #projects a, &.vert-resizing .main-view, &.vert-resizing .CodeMirror-lines {
+    &.vert-resizing a, &.vert-resizing #projects a, &.vert-resizing .main-view, &.vert-resizing .CodeMirror-lines, &.vert-resizing .CodeMirror-gutter-text {
         cursor: row-resize;   
     }
 }
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 0eaad15874d..d25258a940c 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -186,23 +186,24 @@ define(function (require, exports, module) {
                 
                 if (doResize) {
                     // resize the main element to the new size
-                    elementSizeFunction.apply($element, [newSize]);
                     
-                    // if there is a content element, its size is the new size
-                    // minus the size of the non-resizable elements
-                    if ($resizableElement !== undefined) {
-                        contentSizeFunction.apply($resizableElement, [newSize - baseSize]);
-                    }
+                    if ($element.is(":visible")) {
+                        elementSizeFunction.apply($element, [newSize]);
+                        
+                        // if there is a content element, its size is the new size
+                        // minus the size of the non-resizable elements
+                        if ($resizableElement !== undefined) {
+                            contentSizeFunction.apply($resizableElement, [newSize - baseSize]);
+                        }
                     
-                    if (!$element.is(":visible") && newSize > 10) {
+                        if (newSize < 10) {
+                            toggleVisibility($element);
+                        }
+                    } else if (newSize > 10) {
                         toggleVisibility($element);
                         $element.trigger("panelResizeStart", [elementSizeFunction.apply($element)]);
                     }
-                    
-                    if ($element.is(":visible") && newSize < 10) {
-                        toggleVisibility($element);
-                    }
-                    
+
                     EditorManager.resizeEditor();
                 }
                 

From 0c986bba7411e22fcf086e8d404877314c675566 Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 02:22:27 +0200
Subject: [PATCH 08/10] Comments and cleanup

---
 src/utils/Resizer.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index d25258a940c..b305bcf0508 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -40,8 +40,10 @@
  * while resizing), custom or internal resizes and save the final resized value into local 
  * storage for example.
  *
- * TODO Trigger panelResizeStart and panelResizeUpdate as required. They aren't needed
- *      currently.
+ * A resizable element can be collapsed/expanded using the `toggleVisibility` API
+ *
+ * The resizable elements trigger a panelCollapsed and panelExpanded event when the panel toggles
+ * between visible and invisible
  */
 define(function (require, exports, module) {
     "use strict";
@@ -64,10 +66,12 @@ define(function (require, exports, module) {
     var $mainView;
     
     /**
-     *
+     * Changes the visibility state of a resizable element. The toggle
+     * functionality is added when an element is made resizable.
+     * @param {DOMNode} element Html element to toggle if possible
      */
-    function toggleVisibility($element) {
-        var toggleFunction = $element.data("toggleVisibility");
+    function toggleVisibility(element) {
+        var toggleFunction = $(element).data("toggleVisibility");
         if (toggleFunction) {
             toggleFunction();
         }
@@ -109,8 +113,7 @@ define(function (require, exports, module) {
             elementSizeFunction = direction === DIRECTION_HORIZONTAL ? $element.width : $element.height,
             directionIncrement  = (position === POSITION_TOP || position === POSITION_LEFT) ? 1 : -1,
             contentSizeFunction = null,
-            resizerCSSPosition  = "",
-            toggleSize          = 0;
+            resizerCSSPosition  = "";
 
         minSize = minSize || 0;
         
@@ -123,6 +126,7 @@ define(function (require, exports, module) {
         $element.prepend($resizer);
         
         $element.data("toggleVisibility", function () {
+                
             if ($element.is(":visible")) {
                 $element.hide();
                 $resizer.insertBefore($element).css(resizerCSSPosition, 0);
@@ -137,16 +141,14 @@ define(function (require, exports, module) {
             
             EditorManager.resizeEditor();
         });
-        
-        EditorManager.resizeEditor();
-        
+                
         if (position === POSITION_RIGHT || position === POSITION_BOTTOM) {
             $element.resize(function () {
                 $resizer.css(resizerCSSPosition, elementSizeFunction.apply($element) - elementSizeFunction.apply($resizer) + 1);
             });
         }
         
-        // A value of 0 for minSize implies that the panel is collapsable
+        // A value of 0 for minSize implies that the panel is collapsable on doubleclick
         if (!minSize) {
             $resizer.on("dblclick", function () {
                 toggleVisibility($element);

From 57766a720d99748afef98fcc0b28ed2628c03964 Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 02:27:37 +0200
Subject: [PATCH 09/10] Removed unused EditorManager and isBarClosed

---
 src/project/SidebarView.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index 98437b39632..35f8d5fa503 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -41,12 +41,9 @@ define(function (require, exports, module) {
         Commands            = require("command/Commands"),
         Strings             = require("strings"),
         PreferencesManager  = require("preferences/PreferencesManager"),
-        EditorManager       = require("editor/EditorManager"),
         Global              = require("utils/Global"),
         Resizer             = require("utils/Resizer");
 
-    var isSidebarClosed         = false;
-
     var PREFERENCES_CLIENT_ID = "com.adobe.brackets.SidebarView",
         defaultPrefs = { sidebarWidth: 200, sidebarClosed: false };
 

From cbe22099e83783d0252ef86756a73465a97195dd Mon Sep 17 00:00:00 2001
From: Chema <jbalsas@gmail.com>
Date: Thu, 11 Oct 2012 02:30:54 +0200
Subject: [PATCH 10/10] Fix size glitch when starting resize from hidden panel

---
 src/utils/Resizer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index b305bcf0508..ddd8f42f856 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -202,6 +202,7 @@ define(function (require, exports, module) {
                             toggleVisibility($element);
                         }
                     } else if (newSize > 10) {
+                        elementSizeFunction.apply($element, [newSize]);
                         toggleVisibility($element);
                         $element.trigger("panelResizeStart", [elementSizeFunction.apply($element)]);
                     }