34 files changed, 498 insertions, 251 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 0c950ffd..2a3fc068 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -520,9 +520,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
                 this.inComputedStyleMode = false; // No computed styles mode for multiple items
                 
                 ///// if multiple items are selected, then show common rules
-                var elements = items.map(function(item) {
-                    return item._element;
-                });
+                var elements = Array.prototype.slice.call(this.application.ninja.selectedElements, 0);
                 
                 ///// show toolbar, but hide computed style button
                 this.sections.styles.toolbar.style.display = '';
@@ -538,7 +536,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
                 this.sections.styles.statusMsg.classList.add('nj-css-panel-hide');
                 this.sections.styles.showComputedEl.classList.remove('nj-css-panel-hide');// .style.display = '';
                 this.sections.styles.toolbar.style.display = '';
-                this.showStylesForElement(items[0]._element, null);
+                this.showStylesForElement(items[0], null);
             } else {
                 this.sections.styles.statusMsg.classList.add('nj-css-panel-hide');
                 this._inMultiSelectMode = false;
@@ -1691,7 +1689,7 @@ NJCSSStyle.prototype.styleChange = function() {
 NJCSSStyle.prototype.getUnits = function(val) {
     if(val.split(/\s/).length > 1) {
         return false;
-    } else if(/px|em|pt|in|cm|mm|ex|pc|%/.test(val)) {
+    } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
         return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
     }
     return null;
@@ -1771,7 +1769,7 @@ NJCSSStyle.prototype.updateValue = function(newValue, bypassUndo) {
         this.styleChange();
         return true;
     }
-    
+
     var IMPORTANT_FLAG = ' !important',
         dec = this.njRule.declaration,        
         acceptAsValid = false,
diff --git a/js/panels/Components/ComponentsPanel.js b/js/panels/Components/ComponentsPanel.js
deleted file mode 100755
index df1d74bb..00000000
--- a/js/panels/Components/ComponentsPanel.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-var Montage = require("montage/core/core").Montage;
-
-var     PanelBase = require("js/panels/PanelBase").PanelBase;
-var ComponentsPanelBase = require("js/panels/Components/ComponentsPanelBase.reel").ComponentsPanelBase;
-
-exports.ComponentsPanel = Montage.create(PanelBase, {
-    id : {value : "componentsPanel", writable:true, enumerable:true, configurable:true},
-    panelName : {value : "Components", writable:true, enumerable:true, configurable:true},
-    panelHeaderID : {value : "componentsPanelHeader", writable:true, enumerable:true, configurable:true},
-    disclosureIconID : {value : "componentsPanelDisclosureIcon", writable:true, enumerable:true, configurable:true},
-    closeButtonID : {value : "componentsPanelCloseButton", writable:true, enumerable:true, configurable:true},
-    panelContentID : {value : "componentsPanelContent", writable:true, enumerable:true, configurable:true},
-
-    init : {
-        value : function()
-        {
-            this.contentHeight = 200;
-            this.minHeight = 100;
-            this.defaultHeight = 200;
-
-            /* OLD WAY -- Removing the temporary div
-            // TODO: Remove this comment once this is tested.
-            var panelContainer = document.createElement("div");
-            this._componentsPanelBase = ComponentsPanelBase.create();
-            this._componentsPanelBase.element = panelContainer;
-
-            this.content = this._componentsPanelBase;
-            this._componentsPanelBase.needsDraw = true;
-            */
-
-            this.content = ComponentsPanelBase.create();
-        }
-    },
-
-    _componentsPanelBase:{
-        enumerable: true,
-        value: null,
-        writable:true
-    }
-
-});
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 89233c64..2d339411 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -37,21 +37,53 @@
 .mp_property
 {
     height:40px;
+    position: relative;
 }
 
 .mp_property > .prop-label
 {
-  float: left;
-  /*width:86px;*/
-  margin: 0px 8px 2px 5px;
+    position:relative;
+    top:12px;
+    float: left;
+    width: 100px;
 }
 
 .mp_property > .prop-controller
 {
-  float: right;
-  clear: left;
-  width: auto;
-  margin: 0px 0px 3px 0px;
+    position:relative;
+    top:12px;
+    left: 10px;
+    float: left;
+}
+
+.mp_property .hottext,
+.mp_property .hottextInput
+{
+    width: 30px;
+}
+
+.mp_property .button
+{
+    width: 30px;
+    height: 20px;
+}
+
+.mp_property .inputRow
+{
+    top: 8px;
+    position: relative;
+}
+
+.mp_properties_list
+{
+   padding-bottom: 8px;
+}
+
+.mp_properties_list > .mp_property > .colortoolbar
+{
+        width: 27px !important;
+        height: 27px !important;
+    overflow:hidden !important;
 }
 
 .mp_buttons {