Merge pull request #6226 from jasongrout/css-top-default

Remove $el_to_style from the widget javascript code; '' now defaults to this.$el

IPython/html/static/widgets/js/widget.js

@@ -463,19 +463,11 b' define(["widgets/js/manager",'
 
         _get_selector_element: function (selector) {
             // Get the elements via the css selector.
-
-            // If the selector is blank, apply the style to the $el_to_style 
-            // element.  If the $el_to_style element is not defined, use apply 
-            // the style to the view's element.
             var elements;
             if (!selector) {
-                if (this.$el_to_style === undefined) {
-                    elements = this.$el;
-                } else {
-                    elements = this.$el_to_style;
-                }
+                elements = this.$el;
             } else {
-                elements = this.$el.find(selector);
+                elements = this.$el.find(selector).addBack(selector);
             }
             return elements;
         },

IPython/html/static/widgets/js/widget_bool.js

@@ -21,7 +21,6 b' define(['
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
-            this.$el_to_style = this.$checkbox; // Set default element to style
             this.update(); // Set defaults.
         },
 

IPython/html/static/widgets/js/widget_container.js

@@ -152,7 +152,6 b' define(['
                 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
             });
 
-            this.$el_to_style = this.$body;
             this._shown_once = false;
             this.popped_out = true;
 
@@ -264,7 +263,7 b' define(['
             // "modal" - select the modal div
             // "modal [selector]" - select element(s) within the modal div.
             // "[selector]" - select elements within $el
-            // "" - select the $el_to_style
+            // "" - select the $el
             if (selector.substring(0, 5) == 'modal') {
                 if (selector == 'modal') {
                     return this.$window;

IPython/html/static/widgets/js/widget_int.js

@@ -24,7 +24,6 b' define(['
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
                 .append(this.$slider);
-            this.$el_to_style = this.$slider_container; // Set default element to style
             this.$el.append(this.$slider_container);
             
             this.$readout = $('<div/>')
@@ -158,7 +157,6 b' define(['
                 .addClass('form-control')
                 .addClass('widget-numeric-text')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
@@ -262,7 +260,6 b' define(['
                 .addClass('progress')
                 .addClass('widget-progress')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$progress; // Set default element to style
             this.$bar = $('<div />')
                 .addClass('progress-bar')
                 .css('width', '50%')

IPython/html/static/widgets/js/widget_selection.js

@@ -21,7 +21,6 b' define(['
                 .addClass('widget_item')
                 .addClass('btn-group')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$buttongroup; // Set default element to style
             this.$droplabel = $('<button />')
                 .addClass('btn btn-default')
                 .addClass('widget-combo-btn')
@@ -119,7 +118,6 b' define(['
             this.$container = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-radio-box');
-            this.$el_to_style = this.$container; // Set default element to style
             this.update();
         },
         
@@ -210,7 +208,6 b' define(['
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$buttongroup; // Set default element to style
             this.update();
         },
         
@@ -302,7 +299,6 b' define(['
                 .addClass('widget-listbox form-control')
                 .attr('size', 6)
                 .appendTo(this.$el);
-            this.$el_to_style = this.$listbox; // Set default element to style
             this.update();
         },
         

IPython/html/static/widgets/js/widget_string.js

@@ -56,7 +56,6 b' define(['
                 .attr('rows', 5)
                 .addClass('widget-text form-control')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
 
             this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
@@ -140,7 +139,6 b' define(['
                 .addClass('input')
                 .addClass('widget-text form-control')
                 .appendTo(this.$el);
-            this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
             this.model.on('change:placeholder', function(model, value, options) {
                 this.update_placeholder(value);

IPython/html/tests/widgets/widget.js

@@ -149,7 +149,7 b' casper.notebook_test(function () {'
         'import time\n' +
         'textbox = widgets.TextWidget()\n' +
         'display(textbox)\n' +
-        'textbox.add_class("my-throttle-textbox")\n' +
+        'textbox.add_class("my-throttle-textbox", selector="input")\n' +
         'def handle_change(name, old, new):\n' +
         '    display(len(new))\n' +
         '    time.sleep(0.5)\n' +

IPython/html/tests/widgets/widget_float.js

@@ -11,7 +11,7 b' casper.notebook_test(function () {'
     float_text.index = this.append_cell(
         'float_widget = widgets.FloatTextWidget()\n' +
         'display(float_widget)\n' + 
-        'float_widget.add_class("my-second-float-text")\n' + 
+        'float_widget.add_class("my-second-float-text", selector="input")\n' + 
         'print(float_widget.model_id)\n');
     this.execute_cell_then(float_text.index, function(index){
         float_text.model_id = this.get_output_cell(index).text.trim();

IPython/html/tests/widgets/widget_int.js

@@ -6,12 +6,12 b' casper.notebook_test(function () {'
         'print("Success")');
     this.execute_cell_then(index);
 
-    var int_text = {}
+    var int_text = {};
     int_text.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-int-text';
     int_text.index = this.append_cell(
         'int_widget = widgets.IntTextWidget()\n' +
         'display(int_widget)\n' + 
-        'int_widget.add_class("my-second-int-text")\n' + 
+        'int_widget.add_class("my-second-int-text", selector="input")\n' + 
         'print(int_widget.model_id)\n');
     this.execute_cell_then(int_text.index, function(index){
         int_text.model_id = this.get_output_cell(index).text.trim();
@@ -69,7 +69,7 b' casper.notebook_test(function () {'
         'intrange = [widgets.BoundedIntTextWidget(),\n' +
         '    widgets.IntSliderWidget()]\n' +
         '[display(intrange[i]) for i in range(2)]\n' +
-        'intrange[0].add_class("my-second-num-test-text")\n' +  
+        'intrange[0].add_class("my-second-num-test-text", selector="input")\n' +  
         'print(intrange[0].model_id)\n');
     this.execute_cell_then(int_text2.index, function(index){
         int_text2.model_id = this.get_output_cell(index).text.trim();

IPython/html/widgets/widget.py

@@ -388,10 +388,7 b' class DOMWidget(Widget):'
         selector: unicode (optional, kwarg only)
             JQuery selector to use to apply the CSS key/value.  If no selector 
             is provided, an empty selector is used.  An empty selector makes the 
-            front-end try to apply the css to a default element.  The default
-            element is an attribute unique to each view, which is a DOM element
-            of the view that should be styled with common CSS (see 
-            `$el_to_style` in the Javascript code).
+            front-end try to apply the css to the top-level element.
         """
         if value is None:
             css_dict = dict_or_key