From 6c1b85991d8e49413e103fa41c6c337c06a2fd8e 2014-06-02 22:00:33
From: Jonathan Frederic <jon.freder@gmail.com>
Date: 2014-06-02 22:00:33
Subject: [PATCH] Change css dict to a list,
even though this introduces O(N) complexity, it fixes a bug
where path dependent css traits could be executed out of order,
making it impossible to actually set the traits from the back-end.

---

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 04a1fd8..b507185 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -410,16 +410,16 @@ function(WidgetManager, _, Backbone){
      
             var css = this.model.get('_css');
             if (css === undefined) {return;}
-            var that = this;
-            _.each(css, function(css_traits, selector){
+            for (var i = 0; i < css.length; i++) {
                 // Apply the css traits to all elements that match the selector.
-                var elements = that._get_selector_element(selector);
+                var selector = css[i][0];
+                var elements = this._get_selector_element(selector);
                 if (elements.length > 0) {
-                    _.each(css_traits, function(css_value, css_key){
-                        elements.css(css_key, css_value);
-                    });
+                    var trait_key = css[i][1];
+                    var trait_value = css[i][2];
+                    elements.css(trait_key ,trait_value);
                 }
-            });
+            }
         },
 
         _get_selector_element: function (selector) {
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index d46b2d0..4131826 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -341,7 +341,7 @@ class Widget(LoggingConfigurable):
 
 class DOMWidget(Widget):
     visible = Bool(True, help="Whether the widget is visible.", sync=True)
-    _css = Dict(sync=True) # Internal CSS property dict
+    _css = List(sync=True) # Internal CSS property list: (selector, key, value)
 
     def get_css(self, key, selector=""):
         """Get a CSS property of the widget.
@@ -384,18 +384,17 @@ class DOMWidget(Widget):
             of the view that should be styled with common CSS (see 
             `$el_to_style` in the Javascript code).
         """
-        if not selector in self._css:
-            self._css[selector] = {}
-        my_css = self._css[selector]
-        
         if value is None:
             css_dict = dict_or_key
         else:
             css_dict = {dict_or_key: value}
         
         for (key, value) in css_dict.items():
-            if not (key in my_css and value == my_css[key]):
-                my_css[key] = value
+            # First remove the selector/key pair from the css list if it exists.
+            # Then add the selector/key pair and new value to the bottom of the 
+            # list.
+            self._css = [x for x in self._css if not (x[0]==selector and x[1]==key)]
+            self._css += [(selector, key, value)]
         self.send_state('_css')
 
     def add_class(self, class_names, selector=""):