fix(mdPanel): Panel and tooltip theming (#10031)

- Initialized theming through `$mdTheming` on the panel element
   and container after the panel is created.
 - Fixed the panel and tooltip theme Sass files to remove unthemed
   styles and complicated syntax.
 - Removed an unnecessary `$mdTheming` call from the tooltip
   directive.

Fixes #10030

Author: bradrich

src/components/panel/panel-theme.scss

@@ -1,9 +1,3 @@
-.md-panel {
-
-  background-color: '{{background-900-0.0}}';
-
-  &._md-panel-backdrop.md-THEME_NAME-theme {
-    background-color: '{{background-900-1.0}}';
-  }
-
+._md-panel-backdrop.md-THEME_NAME-theme {
+  background-color: '{{background-900-1.0}}';
 }

src/components/panel/panel.js

@@ -453,15 +453,15 @@ angular
  * @returns {!MdPanelRef}
  */
 
- /**
-  * @ngdoc method
-  * @name MdPanelRef#updateAnimation
-  * @description
-  * Updates the animation configuration for a panel. You can use this to change
-  * the panel's animation without having to re-create it.
-  *
-  * @param {!MdPanelAnimation} animation
-  */
+/**
+ * @ngdoc method
+ * @name MdPanelRef#updateAnimation
+ * @description
+ * Updates the animation configuration for a panel. You can use this to change
+ * the panel's animation without having to re-create it.
+ *
+ * @param {!MdPanelAnimation} animation
+ */
 
 
 /*****************************************************************************
@@ -1108,6 +1108,9 @@ function MdPanelRef(config, $injector) {
   /** @private @const {!angular.$mdUtil} */
   this._$mdUtil = $injector.get('$mdUtil');
 
+  /** @private @const {!angular.$mdTheming} */
+  this._$mdTheming = $injector.get('$mdTheming');
+
   /** @private @const {!angular.Scope} */
   this._$rootScope = $injector.get('$rootScope');
 
@@ -1650,7 +1653,8 @@ MdPanelRef.prototype._createPanel = function() {
 
 
 /**
- * Adds the styles for the panel, such as positioning and z-index.
+ * Adds the styles for the panel, such as positioning and z-index. Also,
+ * themes the panel element and panel container using `$mdTheming`.
  * @returns {!angular.$q.Promise<!MdPanelRef>}
  * @private
  */
@@ -1661,9 +1665,13 @@ MdPanelRef.prototype._addStyles = function() {
     self.panelEl.css('z-index', self.config['zIndex'] + 1);
 
     var hideAndResolve = function() {
+      // Theme the element and container.
+      self._setTheming();
+
       // Remove left: -9999px and add hidden class.
       self.panelEl.css('left', '');
       self.panelContainer.addClass(MD_PANEL_HIDDEN);
+
       resolve(self);
     };
 
@@ -1679,17 +1687,31 @@ MdPanelRef.prototype._addStyles = function() {
       return; // Don't setup positioning.
     }
 
-    // Wait for angular to finish processing the template, then position it
-    // correctly. This is necessary so that the panel will have a defined height
-    // and width.
+    // Wait for angular to finish processing the template
     self._$rootScope['$$postDigest'](function() {
+      // Position it correctly. This is necessary so that the panel will have a
+      // defined height and width.
       self._updatePosition(true);
+
+      // Theme the element and container.
+      self._setTheming();
+
       resolve(self);
     });
   });
 };
 
 
+/**
+ * Sets the `$mdTheming` classes on the `panelContainer` and `panelEl`.
+ * @private
+ */
+MdPanelRef.prototype._setTheming = function() {
+  this._$mdTheming(this.panelEl);
+  this._$mdTheming(this.panelContainer);
+};
+
+
 /**
  * Updates the position configuration of a panel
  * @param {!MdPanelPosition} position
@@ -2210,6 +2232,7 @@ MdPanelRef.prototype.removeFromGroup = function(groupName) {
   }
 };
 
+
 /**
  * Possible default closeReasons for the close function.
  * @enum {string}
@@ -2219,6 +2242,7 @@ MdPanelRef.closeReasons = {
   ESCAPE: 'escapeToClose',
 };
 
+
 /*****************************************************************************
  *                               MdPanelPosition                             *
  *****************************************************************************/

src/components/tooltip/tooltip-theme.scss

@@ -1,6 +1,4 @@
-.md-tooltip.md-THEME_NAME-theme {
+.md-panel.md-tooltip.md-THEME_NAME-theme {
   color: '{{background-700-contrast}}';
-  &.md-panel {
-    background-color: '{{background-700}}';
-  }
+  background-color: '{{background-700}}';
 }

src/components/tooltip/tooltip.js

@@ -46,7 +46,7 @@ angular
  *     Defaults to bottom.
  */
 function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
-    $mdUtil, $mdTheming, $mdPanel, $$mdTooltipRegistry) {
+    $mdUtil, $mdPanel, $$mdTooltipRegistry) {
 
   var ENTER_EVENTS = 'focus touchstart mouseenter';
   var LEAVE_EVENTS = 'blur touchcancel mouseleave';
@@ -81,9 +81,6 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
     var origin, position, panelPosition, panelRef, autohide, showTimeout,
         elementFocusedOnWindowBlur = null;
 
-    // Initialize the theming of the tooltip.
-    $mdTheming(element);
-
     // Set defaults
     setDefaults();