Chris/issue 18

src/ProjectManager.js

@@ -34,7 +34,8 @@ define(function (require, exports, module) {
         Dialogs             = require("Dialogs"),
         Strings             = require("strings"),
         FileViewController  = require("FileViewController"),
-        PerfUtils           = require("PerfUtils");
+        PerfUtils           = require("PerfUtils"),
+        ViewUtils           = require("ViewUtils");
 
     /**
      * @private
@@ -240,6 +241,10 @@ define(function (require, exports, module) {
                 });
         });
 
+        result.always(function () {
+            ViewUtils.updateChildWidthToParentScrollwidth($("#project-files-container"));
+        });
+
         return result;
     }
 
@@ -344,6 +349,8 @@ define(function (require, exports, module) {
                     treeNode.removeClass("jstree-leaf jstree-closed jstree-open")
                             .addClass(classToAdd);
                 }
+
+                ViewUtils.updateChildWidthToParentScrollwidth($("#project-files-container"));
             },
             function (error) {
                 Dialogs.showModalDialog(

src/ViewUtils.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2012 Adobe Systems Incorporated. All Rights Reserved.
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, browser: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define: false, $: false */
+
+define(function (require, exports, module) {
+    'use strict';
+
+    // Load dependent modules
+
+
+    /** If a parent div has overflow:auto then the child will have a problem
+     * setting the background color. The reason for this is the width of the 
+     * child is the visible width of the parent and not the scrollWidth, so if
+     * the div scrolls the background looks wrong.
+     * @param {!JQuery} $parent the jQuery parent for the object 
+     */
+    function updateChildWidthToParentScrollwidth($parent) {
+        var $firstChild = $parent.children().first();
+        //clear the width first so we get the natural scrollWidth below
+        $firstChild.width("");
+
+        var targetWidth = $parent[0].scrollWidth -
+            parseInt($parent.css("paddingLeft"), 10) -
+            parseInt($parent.css("paddingRight"), 10);
+
+        $firstChild.width(targetWidth);
+    }
+
+
+    // Define public API
+    exports.updateChildWidthToParentScrollwidth = updateChildWidthToParentScrollwidth;
+});

src/WorkingSetView.js

@@ -18,7 +18,8 @@ define(function (require, exports, module) {
         Commands              = require("Commands"),
         EditorManager         = require("EditorManager"),
         FileViewController    = require("FileViewController"),
-        NativeFileSystem      = require("NativeFileSystem").NativeFileSystem;
+        NativeFileSystem      = require("NativeFileSystem").NativeFileSystem,
+        ViewUtils             = require("ViewUtils");
 
 
     /** Each list item in the working set stores a references to the related document in the list item's data.  
@@ -36,6 +37,8 @@ define(function (require, exports, module) {
             $("#open-files-container").show();
             $("#open-files-divider").show();
         }
+
+        ViewUtils.updateChildWidthToParentScrollwidth($("#open-files-container"));
     }
 
     /** 

src/brackets.less

@@ -225,8 +225,8 @@ a, img {
 
 #project-files-container {
     .box-flex(1);
-    margin: 0px 0px 0px 8px;
-    padding: 0;
+    padding: 0px 0px 0px 8px;
+    margin: 0;
     overflow: auto;
 
     ul { margin-top: 0; }

src/styles/jsTreeTheme.less

@@ -17,6 +17,27 @@
     #gradient > .vertical(#5fa3e0, #0065be);
 }
 
+/* Make the links in the JS tree the width of the container
+ * by shifting the off the screen by negative margin and moving the
+ * content back by pushing the padding. The icons are positioned absolute
+ * relative to the containing list item so the sit above the a's background. 
+ * This also means we need to include the size of the sprite in the padding
+ * so the text ends up back in the same spot visually
+ */
+.jstree-brackets li > a {
+    padding-left: @spriteSize18 + 10000;
+    margin-left: -10000px;
+    width: 100%;
+}
+
+.jstree li { 
+    position: relative;
+}
+
+.jstree ins {
+    position: absolute;
+}
+
 .jstree-brackets a .jstree-icon { background-position:-56px -19px; }
 .jstree-brackets a.jstree-loading .jstree-icon { background:url("styles/images/throbber.gif") center center no-repeat !important; }