DevTools: migrate MetricsSidebarPane to shadow

third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
index 8e3a2b246a05300e3e2129012645cc54f846b314..f44b1fe8c20ea7865c4b6874cf6b387e002c8625 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
@@ -31,7 +31,8 @@
  */
 Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
-    super();
+    super(true);
+    this.registerRequiredCSS('elements/metricsSidebarPane.css');
 
     /** @type {?SDK.CSSStyleDeclaration} */
     this._inlineStyle = null;
@@ -52,7 +53,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane {
     var node = this.node();
     var cssModel = this.cssModel();
     if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
-      this.element.removeChildren();
+      this.contentElement.removeChildren();
       return Promise.resolve();
     }
 
@@ -294,8 +295,8 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane {
 
     metricsElement.appendChild(previousBox);
     metricsElement.addEventListener('mouseover', this._highlightDOMNode.bind(this, false, 'all'), false);
-    this.element.removeChildren();
-    this.element.appendChild(metricsElement);
+    this.contentElement.removeChildren();
+    this.contentElement.appendChild(metricsElement);
   }
 
   /**