Squashed commit of the following:

commit 35ad4d6d2fac4432046141c63c0209cf3d00be5c
Merge: 76377d5 88e80d5
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 20:40:50 2012 -0800

    Merge pull request #24 from mencio/pi_bugs

    Pi bugs

commit 88e80d512bdd125e6d604541c291f699bf5df564
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 17:49:02 2012 -0800

    Correcting the PI lock for height which had a bug in the original pull request.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 76377d5378c7c23fd3c267fcab91aba39b30c555
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 17:24:46 2012 -0800

    Updating the sass file.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 4ecdc52d3beb3224048726a373d454e1607ba10b
Merge: 0537f8f 3a8dc41
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 17:20:36 2012 -0800

    Merge pull request #27 from ericguzman/TreeComponents

    Tree Components - css fixes

commit 3a8dc4195a166478695bb286493f83258a4be49b
Author: Eric Guzman <ericg@motorola.com>
Date:   Wed Feb 8 16:55:10 2012 -0800

    Tree Components - css fixes

commit 0537f8f29e7b8dd48fd08f20b1533fbe92a54c4b
Merge: ab12be4 b6bc8b0
Author: mayhewinator <jcmayhew@gmail.com>
Date:   Wed Feb 8 14:46:17 2012 -0800

    Merge pull request #25 from mayhewinator/WorkingBranch

    Adding assets required to be a packaged chrome app

commit b6bc8b0bb91382991e6e43ad341304c813124882
Merge: c7b5edf ab12be4
Author: John Mayhew <vpn847@motorola.com>
Date:   Wed Feb 8 14:39:16 2012 -0800

    Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into WorkingBranch

commit c7b5edf0351d678d26b17eb5e2f995a140e209bb
Author: John Mayhew <vpn847@motorola.com>
Date:   Wed Feb 8 14:38:25 2012 -0800

    Added manifest.json, and image file required for being a packaged chrome application. Removed the old versions.json and updated the main page to detect if it is running as a chrome app and retrieve the version info from the chrome.app object. If the app is running hosted, the code will use an XHR to load the manifest.json and retrieve the version number from it directly.

commit 26c470085263ab40a30fc8095bfe3763df5be981
Merge: cd997c1 ab12be4
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 14:34:01 2012 -0800

    Merge branch 'refs/heads/master' into pi_bugs

commit cd997c18bdb346ff44919880239e705df80079ea
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 14:30:56 2012 -0800

    Fix for the PI Lock button.

    Fixing the following JIRA bugs:
    111

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit ab12be4e9a0d9fee4450795077b0107983b5682e
Merge: 10cdeb5 2e58595
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 14:03:36 2012 -0800

    Merge pull request #23 from joseeight/SCSS

    Changing _scss folder to scss

commit 2e58595d5c58ad9937bfc4f85ba8894970d4719f
Author: Jose Antonio Marquez <kgq387@motorola.com>
Date:   Wed Feb 8 13:56:54 2012 -0800

    adding new scss folder

commit 7afa8f3fb2f2cede0b227a00ccc2b84267278db6
Author: Jose Antonio Marquez <kgq387@motorola.com>
Date:   Wed Feb 8 13:54:42 2012 -0800

    delete _scss directory

commit 10cdeb52403f16d5d4be43a516e8cdfbc866a2a2
Merge: 24f9717 9a404b8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 11:33:42 2012 -0800

    Merge pull request #21 from mencio/pi_bugs

    Pi bugs fixes for 964, 616, 1084

commit 24f9717f2714f0497382436c4602736283247cf1
Merge: 763910b 9154cff
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 11:33:22 2012 -0800

    Merge pull request #22 from ericguzman/StylesControllerUpdates

    Styles Controller - Added array of dirty stylesheets and event dispatch ...

commit 9154cff2ce10aae54d9a7bd37a9d8b5578b0e297
Author: Eric Guzman <ericg@motorola.com>
Date:   Wed Feb 8 10:39:17 2012 -0800

    Styles Controller - Added array of dirty stylesheets and event dispatch when a sheet is dirtied.

commit 763910b9d074137eb7dee80447b89407ce5750c9
Merge: e557937 329a859
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 10:18:36 2012 -0800

    Merge pull request #20 from mqg734/ToolFixes

    Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs:

commit e5579374ff39b80b8c0c69faba37f6f581758fe0
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 13:28:17 2012 -0800

    updated montage v.0.6 to the latest changes.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 9a404b8a717d0aac0eabb828a4d3cdc8c9c3eed8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 17:42:04 2012 -0800

    IKNINJA - 1084: Fixing the custom tag.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit a930295dfebd7fe7b4db5324b2048e6e7366c6d8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 16:12:23 2012 -0800

    IKNINJA-616 - Drag and drop images fix for the PI and source

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 15:25:11 2012 -0800

    Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 65145cebdf4cde2767cbd0489ddcea5863c2ca9e
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 14:53:46 2012 -0800

    IKNINJA-964 - Fixed inconsistent element name in PI/CSS panel.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 668510892537eaaeb2e11520831d87b44b2489b7
Merge: 8950b34 c066fb4
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 14:19:22 2012 -0800

    Merge pull request #19 from ericguzman/TreeComponents

    Tree Components - Added copyright comments

commit aec849d91e4b697d496b9ede28b5d89cf2283781
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 14:18:13 2012 -0800

    id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:52:54 2012 -0800

    Fixing some typos and undeclared variables in GLRectangle and ShapesController.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit c066fb41ebee85bacf9b2155366b16831af41d76
Author: Eric Guzman <ericg@motorola.com>
Date:   Tue Feb 7 13:46:05 2012 -0800

    Tree Components - Added copyright comments

commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:30:08 2012 -0800

    Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 8ad767b61460984a4031ba630f76ac8247a61857
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 11:42:10 2012 -0800

    Fixed PI to support WebGL materials.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 486842239c71e7964f38a09aacda4970f2a82e1a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 10:58:14 2012 -0800

    Updated tools and PI to get/set materials by binding to appModel's materials property.  This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 789eaf5a92c903f27462c69a8890fbec695ab14e
Merge: 92ae17b 8950b34
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 09:36:29 2012 -0800

    Merge branch 'refs/heads/ninja-internal' into ToolFixes

commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 16:35:12 2012 -0800

    Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa).

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 75486be2839494c9b54833aff8f5eef3f9542151
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 15:41:48 2012 -0800

    Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 14:03:40 2012 -0800

    Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 13:35:30 2012 -0800

    Allow users to switch between 2d and webGL mode. Note that this doesn't currently work.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 486d9a31a85dd833a1c798049a00403756703034
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 11:35:49 2012 -0800

    Support use WebGL checkbox in the PI.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Jonathan Duran <jduran@motorola.com>

6 files changed, 86 insertions, 22 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 6a503373..5a25cc84 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -408,7 +408,7 @@ span.pp-span-all:focus { -webkit-box-shadow: none; background-color: #b4b4b4; bo
 
 #pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; }
 
-#pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; }
+#pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space, .branch-label { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; }
 
 #pp-container-list li.directory.closed > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderclosed.png"); background-position: 100% 0px; }
 
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index 6a458cc7..d8c212e8 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
     width: 100%;
 }
 .treeRoot .branch .branch-label {
-    border-bottom: 1px solid #505050;
-    cursor: pointer;
-    padding: 3px 0 4px;
     background-repeat: no-repeat;
     background-position: 3px 2px;
-    box-shadow: 0 0 0 0 rgba(0,0,0,0);
-    font-weight: bold;
+    border-bottom: 1px solid #505050;
     box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 3px 0 4px;
+    text-shadow: 1px 1px 0 #000;
 }
 
 /* First Level */
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index b2f427b5..085b11e0 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
 /* Second level */
 .branch .branch .leaf-label {
     background-position: 25px center;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
     padding-left: 45px;
 }
 /* Third level */
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index d70b016c..4f9e6a72 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "Branch"
             },
             "defaultLeaf" : {
-                "module" : "js/components/treeview/presets-leaf.reel",
+                "module" : "js/components/treeview/leaf.reel",
                 "name" : "Leaf"
             },
             "scrollview": {
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.js b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
index 43f08fcf..49117090 100644
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
@@ -28,6 +28,14 @@ exports.PosSize = Montage.create(Component, {
         value: null
     },
 
+    aspectRatioWidth: {
+        value: null
+    },
+
+    aspectRatioHeight: {
+        value: null
+    },
+
     _disablePosition: {
         value: true
     },
@@ -62,9 +70,8 @@ exports.PosSize = Montage.create(Component, {
             this.widthControl.addEventListener("change", this, false);
             this.widthControl.addEventListener("changing", this, false);
 
-            
-            //this._controlList[0].control.addEventListener("action", this._handleStageEvent.bind(this), false);
-            //PropertiesPanelModule.PropertiesPanelBase.PIControlList["stageWidthHeightLock"] = this._controlList[0].control;
+            this.bindButton.identifier = "ratio";
+            this.bindButton.addEventListener("action", this, false);
 
         }
     },
@@ -87,6 +94,25 @@ exports.PosSize = Montage.create(Component, {
         }
     },
 
+    /**
+     * Calculate the current aspect ration when the bind button is pressed.
+     * If one of the values is 0, then use 1:1 as the ratio;
+     */
+    handleRatioAction: {
+        value: function() {
+            if(this.bindButton.value) {
+                this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
+                if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
+
+                this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
+                if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
+            } else {
+                this.aspectRatioWidth = 1;
+                this.aspectRatioHeight = 1;
+            }
+        }
+    },
+
     handleLeftChange: {
         value: function(event) {
             var prevPosition;
@@ -121,6 +147,17 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
+
+                    this.widthControl.value = newWidth;
+                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
+                }
+
                 this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
@@ -135,9 +172,23 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
+
+                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
+
+                    this.heightControl.va