[DevTools] Move Popover to shadow DOM.

third_party/WebKit/Source/devtools/front_end/ui/popover.css

-.popover-container {
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.popover {
+:host {

[alph, 2017/02/21 21:27:23]

Should we have a copyright header?

[dgozman, 2017/02/21 21:36:05]

I don't know how that is supposed to work :-)
I think the safest bet is to remove this file (which I plan to).

     position: absolute;
     z-index: 600;
     pointer-events: none;
     display: flex;
     background-color: white;
     box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.37);
     border-radius: 2px;
 }
 
-.popover .content {
+.widget {
+    flex: auto;
+    pointer-events: none;
+    overflow: visible;
+}
+
+.popover-content {
     pointer-events: auto;
     overflow: auto;
     -webkit-user-select: text;
     line-height: 11px;
     flex: auto;
     padding: 6px;
 }
 
-.popover .content.no-padding {
+.popover-content.no-padding {
     padding: 0;
     overflow: hidden;
 }
 
-.popover .arrow {
+.arrow {
     position: absolute;
     background-image: url(Images/popoverArrows.png);
     width: 19px;
     height: 19px;
     margin-top: -19px;
     top: 0;
     left: 0;
+    z-index: 1;
 }
 
-.-theme-with-dark-background .popover .arrow {
+:host-context(.-theme-with-dark-background) .arrow {
     -webkit-filter: invert(80%);
 }
 
-.popover.top-left-arrow .arrow {
+.arrow.top-left-arrow {
     /* The default is top-left, no styles needed. */
 }
 
-.popover.top-right-arrow .arrow {
+.arrow.top-right-arrow {
     right: 19px;
     left: auto;
 }
 
-.popover.bottom-left-arrow .arrow {
+.arrow.bottom-left-arrow {
     top: auto;
     bottom: 0;
     margin-top: 0;
     margin-bottom: -19px;
     background-position: 0 -19px;
 }
 
-.popover.bottom-right-arrow .arrow {
+.arrow.bottom-right-arrow {
     right: 15px;
     left: auto;
     top: auto;
     bottom: 0;
     margin-top: 0;
     margin-bottom: -19px;
     background-position: 0 -19px;
 }