From eccc20ce1a2e21e57db51c6f9226964b0553b2ff Mon Sep 17 00:00:00 2001
From: Jason Grout <jgrout6@bloomberg.net>
Date: Mon, 28 Jul 2014 19:11:20 +0000
Subject: [PATCH] Remove $el_to_style from the widget javascript code; '' now
 defaults to this.$el

This seems to make it easiest to select the top-level element.  An alternative is to use special syntax for top-level elements, like in https://github.com/ipython/ipython/pull/6185

This will be followed up by other fixes that let the user set specific common properties of different elements.

This change also adds the .addBack() call, which means that nonempty selectors now apply to this.$el and its descendants, rather than just the descendants of this.$el.
---
 IPython/html/static/widgets/js/widget.js           | 12 ++----------
 IPython/html/static/widgets/js/widget_bool.js      |  1 -
 IPython/html/static/widgets/js/widget_container.js |  3 +--
 IPython/html/static/widgets/js/widget_int.js       |  3 ---
 IPython/html/static/widgets/js/widget_selection.js |  4 ----
 IPython/html/static/widgets/js/widget_string.js    |  2 --
 IPython/html/widgets/widget.py                     |  5 +----
 7 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 99a187762..762968425 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -466,19 +466,11 @@ 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;
         },
diff --git a/IPython/html/static/widgets/js/widget_bool.js b/IPython/html/static/widgets/js/widget_bool.js
index 5a3ba18ec..83af9d4ed 100644
--- a/IPython/html/static/widgets/js/widget_bool.js
+++ b/IPython/html/static/widgets/js/widget_bool.js
@@ -21,7 +21,6 @@ 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.
         },
 
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index ce001e0d5..630118cb9 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -158,7 +158,6 @@ 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;
 
@@ -272,7 +271,7 @@ 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;
diff --git a/IPython/html/static/widgets/js/widget_int.js b/IPython/html/static/widgets/js/widget_int.js
index 2ef71b1ba..f2e5ce767 100644
--- a/IPython/html/static/widgets/js/widget_int.js
+++ b/IPython/html/static/widgets/js/widget_int.js
@@ -24,7 +24,6 @@ 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 @@ 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 @@ 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%')
diff --git a/IPython/html/static/widgets/js/widget_selection.js b/IPython/html/static/widgets/js/widget_selection.js
index 901ac997b..3922dc9a5 100644
--- a/IPython/html/static/widgets/js/widget_selection.js
+++ b/IPython/html/static/widgets/js/widget_selection.js
@@ -21,7 +21,6 @@ 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 @@ 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 @@ 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 @@ 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();
         },
         
diff --git a/IPython/html/static/widgets/js/widget_string.js b/IPython/html/static/widgets/js/widget_string.js
index c8b91d840..0ca90bed3 100644
--- a/IPython/html/static/widgets/js/widget_string.js
+++ b/IPython/html/static/widgets/js/widget_string.js
@@ -56,7 +56,6 @@ 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 @@ 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);
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index 345a4c7ec..228d4c544 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -392,10 +392,7 @@ 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