CSS Panel - Added code hinting and tooltips

5 files changed, 22 insertions, 4 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 2a3fc068..ad8387de 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -4,8 +4,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var cssPropertyNameList      = require("js/panels/CSSPanel/css-property-name-list").cssPropertyNameList,
-    cssCompletionMap         = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap,
+var cssPropertyNameList      = require("js/panels/CSSPanel/css-property-name-list").CssPropertyNameList,
+    cssCompletionMap         = require("js/panels/CSSPanel/css-value-completion-map").CssValueCompletionMap,
     CSS_SHORTHAND_MAP        = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP,
     keyboardModule           = require("js/mediators/keyboard-mediator").Keyboard,
     nj                       = require("js/lib/NJUtils").NJUtils;
diff --git a/js/panels/CSSPanel/css-property-name-list.js b/js/panels/CSSPanel/css-property-name-list.js
index 24a69c09..6d02b755 100755
--- a/js/panels/CSSPanel/css-property-name-list.js
+++ b/js/panels/CSSPanel/css-property-name-list.js
@@ -4,7 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-exports.cssPropertyNameList = [
+exports.CssPropertyNameList = [
     '-webkit-',
     "-webkit-animation",
     "-webkit-animation-delay",
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index ff410951..c6bb070c 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -110,6 +110,9 @@
     margin-right: -7px;
     right: -1px;
 }
+.style-item .hintable-hint {
+    color: #CCC;
+}
 
 /* ------------------------
   Empty Style (Add Style)
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index 469c7268..acc169be 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -17,9 +17,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element" : {"#" : "container"},
                     "addStyleButton": {"#": "add-style-button"},
                     "propertyField": {"@": "property"},
-                    "valueField": {"@": "value"}
+                    "valueField": {"@": "value"},
+                    "propertyNames" : {"@": "propertyNames"}
                 }
             },
+            "propertyNames": {
+                "object": "js/panels/CSSPanel/css-property-name-list"
+            },
             "checkbox": {
                 "module": "montage/ui/checkbox.reel",
                 "name": "Checkbox",
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index a8939bc6..b079bc73 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -272,6 +272,8 @@ exports.Style = Montage.create(TreeNode, {
     templateDidLoad : {
         value: function() {
             this.delegate = this.treeView.contentController.delegate;
+
+            this.propertyField.hints = this.propertyNames;
         }
     },
 
@@ -312,6 +314,13 @@ exports.Style = Montage.create(TreeNode, {
         }
     },
 
+    setToolTips : {
+        value: function() {
+            this.propertyField.element.title = this.propertyField.value;
+            this.valueField.element.title = this.valueField.value;
+        }
+    },
+
     willDraw : {
         value: function() {
             if(this.invalid) {
@@ -319,6 +328,8 @@ exports.Style = Montage.create(TreeNode, {
             } else {
                 this._element.removeAttribute('title');
             }
+
+            this.setToolTips();
         }
     },