DevTools: make flame chart a web component.

Source/devtools/front_end/ui/DOMExtension.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2012 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 266 matching lines @@
 }
 
 /**
  * @param {?Element=} containerElement
  * @return {!Size}
  */
 Element.prototype.measurePreferredSize = function(containerElement)
 {
     containerElement = containerElement || document.body;
     containerElement.appendChild(this);
-    var fakingComponentRoot = false;
-    if (!this.classList.contains("component-root")) {
-        fakingComponentRoot = true;
-        this.classList.add("component-root");
-    }
+    var fakingComponentRoot = WebInspector.installComponentRootStyles(this);
     this.positionAt(0, 0);
     var result = new Size(this.offsetWidth, this.offsetHeight);
     this.positionAt(undefined, undefined);
     this.remove();
     if (fakingComponentRoot)
-        this.classList.remove("component-root");
+        WebInspector.uninstallComponentRootStyles(this);
     return result;
 }
 
 /**
  * @param {!Event} event
  * @return {boolean}
  */
 Element.prototype.containsEventPoint = function(event)
 {
     var box = this.getBoundingClientRect();
@@ skipping 554 matching lines @@
  */
 function isEnterKey(event) {
     // Check if in IME.
     return event.keyCode !== 229 && event.keyIdentifier === "Enter";
 }
 
 function consumeEvent(e)
 {
     e.consume();
 }