DevTools: make flame chart a web component.

Source/devtools/front_end/ui/Popover.js

 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.PopoverHelper=} popoverHelper
  */
 WebInspector.Popover = function(popoverHelper)
 {
     WebInspector.View.call(this);
     this.markAsRoot();
     this.element.className = WebInspector.Popover._classNamePrefix; // Override
+    WebInspector.installComponentRootStyles(this.element);
     this._containerElement = createElementWithClass("div", "fill popover-container");
 
     this._popupArrowElement = this.element.createChild("div", "arrow");
     this._contentDiv = this.element.createChild("div", "content");
 
     this._popoverHelper = popoverHelper;
     this._hideBound = this.hide.bind(this);
 }
 
-WebInspector.Popover._classNamePrefix = "popover component-root custom-popup-vertical-scroll custom-popup-horizontal-scroll";
+WebInspector.Popover._classNamePrefix = "popover custom-popup-vertical-scroll custom-popup-horizontal-scroll";
 
 WebInspector.Popover.prototype = {
     /**
      * @param {!Element} element
      * @param {!Element|!AnchorBox} anchor
      * @param {?number=} preferredWidth
      * @param {?number=} preferredHeight
      * @param {?WebInspector.Popover.Orientation=} arrowDirection
      */
     show: function(element, anchor, preferredWidth, preferredHeight, arrowDirection)
@@ skipping 17 matching lines @@
      * @param {!Element} contentElement
      * @param {!Element|!AnchorBox} anchor
      * @param {?number=} preferredWidth
      * @param {?number=} preferredHeight
      * @param {?WebInspector.Popover.Orientation=} arrowDirection
      */
     _innerShow: function(view, contentElement, anchor, preferredWidth, preferredHeight, arrowDirection)
     {
         if (this._disposed)
             return;
-        this.contentElement = contentElement;
+        this._contentElement = contentElement;
 
         // This should not happen, but we hide previous popup to be on the safe side.
         if (WebInspector.Popover._popover)
             WebInspector.Popover._popover.hide();
         WebInspector.Popover._popover = this;
 
         var document = anchor instanceof Element ? anchor.ownerDocument : contentElement.ownerDocument;
         var window = document.defaultView;
 
         // Temporarily attach in order to measure preferred dimensions.
-        var preferredSize = view ? view.measurePreferredSize() : this.contentElement.measurePreferredSize();
+        var preferredSize = view ? view.measurePreferredSize() : this._contentElement.measurePreferredSize();
         preferredWidth = preferredWidth || preferredSize.width;
         preferredHeight = preferredHeight || preferredSize.height;
 
         window.addEventListener("resize", this._hideBound, false);
         document.body.appendChild(this._containerElement);
         WebInspector.View.prototype.show.call(this, this._containerElement);
 
         if (view)
             view.show(this._contentDiv);
         else
-            this._contentDiv.appendChild(this.contentElement);
+            this._contentDiv.appendChild(this._contentElement);
 
         this._positionElement(anchor, preferredWidth, preferredHeight, arrowDirection);
 
         if (this._popoverHelper) {
             this._contentDiv.addEventListener("mousemove", this._popoverHelper._killHidePopoverTimer.bind(this._popoverHelper), true);
             this.element.addEventListener("mouseout", this._popoverHelper._popoverMouseOut.bind(this._popoverHelper), true);
         }
     },
 
     hide: function()
@@ skipping 96 matching lines @@
             newElementPosition.height += scrollerWidth;
             horizontalAlignment = "left";
             if (verticalAlignment === WebInspector.Popover.Orientation.Bottom)
                 newElementPosition.y -= scrollerWidth;
             // Position arrow accurately.
             this._popupArrowElement.style.left = Math.max(0, anchorBox.x - borderRadius * 2 - arrowOffset) + "px";
             this._popupArrowElement.style.left += anchorBox.width / 2;
         }
 
         this.element.className = WebInspector.Popover._classNamePrefix + " " + verticalAlignment + "-" + horizontalAlignment + "-arrow";
+        WebInspector.installComponentRootStyles(this.element);
         this.element.positionAt(newElementPosition.x - borderWidth, newElementPosition.y - borderWidth, container);
         this.element.style.width = newElementPosition.width + borderWidth * 2 + "px";
         this.element.style.height = newElementPosition.height + borderWidth * 2 + "px";
     },
 
     __proto__: WebInspector.View.prototype
 }
 
 /**
  * @constructor
@@ skipping 163 matching lines @@
             this._resetHoverTimer();
         }
     }
 }
 
 /** @enum {string} */
 WebInspector.Popover.Orientation = {
     Top: "top",
     Bottom: "bottom"
 }