DevTools: make flame chart a web component.

Source/devtools/front_end/ui/View.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 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.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 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.
  */
 
 /**
  * @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;
     this._isShowing = false;
     this._children = [];
     this._hideOnDetach = false;
     this._cssFiles = [];
     this._notificationDepth = 0;
 }
 
@@ skipping 17 matching lines @@
     }
     var styleElement = createElement("style");
     styleElement.type = "text/css";
     styleElement.textContent = content;
     return styleElement;
 }
 
 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;
     },
 
     /**
      * @return {?WebInspector.View}
      */
     parentView: function()
     {
         return this._parentView;
@@ skipping 434 matching lines @@
 {
     if (!condition) {
         console.trace();
         throw new Error(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 = {
     /**
      * @return {!Constraints}
      */
     calculateConstraints: function()
     {
         var constraints = new Constraints(new Size(0, 0));
 
@@ skipping 11 matching lines @@
         this._callOnVisibleChildren(updateForChild);
         return constraints;
     },
 
     __proto__: WebInspector.View.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 = {
     /**
      * @return {!Constraints}
      */
     calculateConstraints: function()
     {
         var constraints = new Constraints(new Size(0, 0));
 
@@ skipping 67 matching lines @@
 {
     WebInspector.View.__assert(!child.__viewCounter && !child.__view, "Attempt to remove element containing view via regular DOM operation");
     return WebInspector.View._originalRemoveChild.call(this, child);
 }
 
 Element.prototype.removeChildren = function()
 {
     WebInspector.View.__assert(!this.__viewCounter, "Attempt to remove element containing view via regular DOM operation");
     WebInspector.View._originalRemoveChildren.call(this);
 }