DevTools: migrate MetricsSidebarPane to shadow

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

 /*
  * Copyright (C) 2007 Apple 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 13 matching lines @@
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @unrestricted
  */
 Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
-    super();
+    super(true);
+    this.registerRequiredCSS('elements/metricsSidebarPane.css');
 
     /** @type {?SDK.CSSStyleDeclaration} */
     this._inlineStyle = null;
   }
 
   /**
    * @override
    * @protected
    * @return {!Promise.<?>}
    */
   doUpdate() {
     // "style" attribute might have changed. Update metrics unless they are being edited
     // (if a CSS property is added, a StyleSheetChanged event is dispatched).
     if (this._isEditingMetrics)
       return Promise.resolve();
 
     // FIXME: avoid updates of a collapsed pane.
     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();
     }
 
     /**
      * @param {?Map.<string, string>} style
      * @this {Elements.MetricsSidebarPane}
      */
     function callback(style) {
       if (!style || this.node() !== node)
         return;
@@ skipping 221 matching lines @@
         boxElement.appendChild(createBoxPartElement.call(this, style, name, 'right', suffix));
         boxElement.appendChild(createElement('br'));
         boxElement.appendChild(createBoxPartElement.call(this, style, name, 'bottom', suffix));
       }
 
       previousBox = boxElement;
     }
 
     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);
   }
 
   /**
    * @param {!Element} targetElement
    * @param {string} box
    * @param {string} styleProperty
    * @param {!Map.<string, string>} computedStyle
    */
   startEditing(targetElement, box, styleProperty, computedStyle) {
     if (UI.isBeingEdited(targetElement))
@@ skipping 136 matching lines @@
       if (commitEditor)
         this.update();
     }
   }
 
   _editingCommitted(element, userInput, previousContent, context) {
     this.editingEnded(element, context);
     this._applyUserInput(element, userInput, previousContent, context, true);
   }
 };