DevTools: make flame chart a web component.

Source/devtools/front_end/ui/View.js

Index: Source/devtools/front_end/ui/View.js
diff --git a/Source/devtools/front_end/ui/View.js b/Source/devtools/front_end/ui/View.js
index a217fe8433000567e4246719b109369cbccd5ae9..055fd72ba69a49e63bda0a2d57c1376ad51f8545 100644
--- a/Source/devtools/front_end/ui/View.js
+++ b/Source/devtools/front_end/ui/View.js
@@ -27,10 +27,19 @@
 /**
  * @constructor
  * @extends {WebInspector.Object}
+ * @param {boolean=} isWebComponent
  */
-WebInspector.View = function()
+WebInspector.View = function(isWebComponent)
 {
-    this.element = createElementWithClass("div", "view");
+    this.contentElement = createElementWithClass("div", "view");
+    if (isWebComponent) {
+        WebInspector.installComponentRootStyles(this.contentElement);
+        this.element = createElementWithClass("div", "vbox flex-auto");
+        this._shadowRoot = this.element.createShadowRoot();

[yurys, 2014/10/21 04:28:34]

What's the point in having this property if we never read it?

[pfeldman, 2014/10/22 09:32:49]

Lets leave it here for the tests. I ended up in need of one in
ElementsTreeOutline, so I followed the pattern here.

+        this._shadowRoot.appendChild(this.contentElement);
+    } else {
+        this.element = this.contentElement;
+    }
     this.element.__view = this;
     this._visible = true;
     this._isRoot = false;
@@ -68,7 +77,7 @@ WebInspector.View.createStyleElement = function(cssFile)
 WebInspector.View.prototype = {
     markAsRoot: function()
     {
-        this.element.classList.add("component-root");
+        WebInspector.installComponentRootStyles(this.element);
         WebInspector.View.__assert(!this.element.parentElement, "Attempt to mark as root attached node");
         this._isRoot = true;
     },
@@ -523,11 +532,12 @@ WebInspector.View.__assert = function(condition, message)
 /**
  * @constructor
  * @extends {WebInspector.View}
+ * @param {boolean=} isWebComponent
  */
-WebInspector.VBox = function()
+WebInspector.VBox = function(isWebComponent)
 {
-    WebInspector.View.call(this);
-    this.element.classList.add("vbox");
+    WebInspector.View.call(this, isWebComponent);
+    this.contentElement.classList.add("vbox");
 };
 
 WebInspector.VBox.prototype = {
@@ -559,11 +569,12 @@ WebInspector.VBox.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.View}
+ * @param {boolean=} isWebComponent
  */
-WebInspector.HBox = function()
+WebInspector.HBox = function(isWebComponent)
 {
-    WebInspector.View.call(this);
-    this.element.classList.add("hbox");
+    WebInspector.View.call(this, isWebComponent);
+    this.contentElement.classList.add("hbox");
 };
 
 WebInspector.HBox.prototype = {