53 files changed, 4061 insertions, 301 deletions
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 2a3fc068..b4a803b2 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,
+var cssPropertyNameList      = require("js/panels/CSSPanel/css-property-name-list").CssPropertyNameList,
-    cssCompletionMap         = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap,
+    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;
@@ -87,7 +87,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
    populateStyleSheetList: {
        value: function() {
-            this.sections.sheets.doc = this.application.ninja.currentDocument._document;
+            this.sections.sheets.doc = this.application.ninja.currentDocument.model.views.design.document;
            var styleTagCount = 0,
                sect          = this.sections.sheets,
                sheetsArray   = nj.toArray(sect.doc.styleSheets),
@@ -822,17 +822,14 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
    },
    getAllRelatedRules : {
        value: function(element) {
-            var pseudos = [null],//, 'link', 'visited', 'active', 'hover', 'focus', 'first-letter', 
+            var rules = [],
-                            //'first-line', 'first-child', 'before', 'after', 'lang'],
+                win = element.ownerDocument.defaultView,
-                rules = [],
                self = this;
-            pseudos.forEach(function(pseudo) {
+            rules = rules.concat(nj.toArray(win.getMatchedCSSRules(element)).filter(function(rule) {
-                rules = rules.concat(nj.toArray(this.getMatchedCSSRules(element, ':'+pseudo)).filter(function(rule) {
+                var sheetId = (rule.parentStyleSheet) ? rule.parentStyleSheet.ownerNode.id : null;
-                    var sheetId = (rule.parentStyleSheet) ? rule.parentStyleSheet.ownerNode.id : null;
+                return sheetId !== self._stageStyleSheetId;
-                    return sheetId !== self._stageStyleSheetId;
+            }));
-                }));
-            }, element.ownerDocument.defaultView);
            return rules;
        }
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
index 25196bc6..cf5bbbdd 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
@@ -25,11 +25,11 @@
        </script>
 </head>
-<body id="computestylesubpanel" onload="">
+<body>
-        <div data-montage-id="nj-css-panel-computed" class="nj-css-panel-hide">
+        <div data-montage-id="nj-css-panel-computed" class="nj-css-panel-computed">
-                <div id="nj-css-filter-panel">
+                <div data-montage-id="nj-css-filter-panel" class="nj-css-filter-panel">
-                        <input data-montage-id="nj-css-filter" class="nj-skinned" type="search">
+                        <input data-montage-id="nj-css-filter" class="nj-skinned nj-css-filter-input" type="search">
-                        <select data-montage-id="nj-css-group-select" class="nj-skinned">
+                        <select data-montage-id="nj-css-group-select" class="nj-skinned nj-css-group-select">
                                <option value="all">All</option>
                                <option value="summary" selected>Summary</option>
                                <option value="background">Background</option>
@@ -40,7 +40,7 @@
                        </select>
                </div>
                <div class="nj-sub-panel">
-                        <dl data-montage-id="nj-css-computed-list" class="nj-css-style-list"></dl>
+                        <dl data-montage-id="nj-css-computed-list" class="nj-css-style-list nj-css-computed-list"></dl>
                </div>
        </div>
 </body>
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
index e9af9b88..d60f2d9c 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
@@ -4,7 +4,7 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-#nj-css-filter-panel {
+.nj-css-filter-panel {
    background-color: #474747;
    box-shadow: 0 1px 1px #505050;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -12,51 +12,51 @@
    padding: 8px 0;
    position: relative;
 }
-#nj-computed-sub-panel {
+.nj-css-panel-computed {
    display:-webkit-box;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
 }
-#nj-computed-sub-panel .nj-sub-panel {
+/*#nj-computed-sub-panel .nj-sub-panel {*/
+.sub-panel-slot .nj-sub-panel {
    -webkit-box-flex: 1;
    background-color: #474747;
    color: #FFF;