[DevTools] Move Popover to shadow DOM.

third_party/WebKit/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 18 matching lines @@
  */
 
 /**
  * @unrestricted
  */
 UI.Popover = class extends UI.Widget {
   /**
    * @param {!UI.PopoverHelper=} popoverHelper
    */
   constructor(popoverHelper) {
-    super();
+    super(true);
     this.markAsRoot();
-    this.element.className = UI.Popover._classNamePrefix;  // Override
+    this.registerRequiredCSS('ui/popover.css');
     this._containerElement = createElementWithClass('div', 'fill popover-container');
-
-    this._popupArrowElement = this.element.createChild('div', 'arrow');
-    this._contentDiv = this.element.createChild('div', 'content');
-
+    this._popupArrowElement = this.contentElement.createChild('div', 'arrow');
+    this._contentDiv = this.contentElement.createChild('div', 'popover-content');
     this._popoverHelper = popoverHelper;
     this._hideBound = this.hide.bind(this);
   }
 
   /**
    * @param {!Element} element
    * @param {!Element|!AnchorBox} anchor
    * @param {?number=} preferredWidth
    * @param {?number=} preferredHeight
    * @param {?UI.Popover.Orientation=} arrowDirection
@@ skipping 71 matching lines @@
     if (this.isShowing())
       this.hide();
     this._disposed = true;
   }
 
   /**
    * @param {boolean} canShrink
    */
   setCanShrink(canShrink) {
     this._hasFixedHeight = !canShrink;
-    this._contentDiv.classList.toggle('fixed-height', this._hasFixedHeight);
   }
 
   /**
    * @param {boolean} noPadding
    */
   setNoPadding(noPadding) {
     this._hasNoPadding = noPadding;
     this._contentDiv.classList.toggle('no-padding', this._hasNoPadding);
   }
 
@@ skipping 79 matching lines @@
       newElementPosition.width = totalWidth - borderRadius * 2;
       newElementPosition.height += scrollerWidth;
       horizontalAlignment = 'left';
       if (verticalAlignment === UI.Popover.Orientation.Bottom)
         newElementPosition.y -= scrollerWidth;
       // Position arrow accurately.
       this._popupArrowElement.style.left =
           Math.max(0, anchorBox.x - newElementPosition.x - borderRadius - arrowRadius + anchorBox.width / 2) + 'px';
     }
 
-    this.element.className =
-        UI.Popover._classNamePrefix + ' ' + verticalAlignment + '-' + horizontalAlignment + '-arrow';
+    this._popupArrowElement.className = 'arrow ' + verticalAlignment + '-' + horizontalAlignment + '-arrow';
     this.element.positionAt(newElementPosition.x, newElementPosition.y - borderWidth, container);
     this.element.style.width = newElementPosition.width + borderWidth * 2 + 'px';
     this.element.style.height = newElementPosition.height + borderWidth * 2 + 'px';
   }
 };
 
 UI.Popover._classNamePrefix = 'popover';
 
 /**
  * @unrestricted
@@ skipping 154 matching lines @@
       this._resetHoverTimer();
     }
   }
 };
 
 /** @enum {string} */
 UI.Popover.Orientation = {
   Top: 'top',
   Bottom: 'bottom'
 };