DevTools: migrate PropertiesWidget to shadow

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2014 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 14 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.PropertiesWidget = class extends UI.ThrottledWidget {
   constructor() {
-    super();
+    super(true /* isWebComponent */);
+    this.registerRequiredCSS('elements/propertiesWidget.css');
 
     SDK.targetManager.addModelListener(SDK.DOMModel, SDK.DOMModel.Events.AttrModified, this._onNodeChange, this);
     SDK.targetManager.addModelListener(SDK.DOMModel, SDK.DOMModel.Events.AttrRemoved, this._onNodeChange, this);
     SDK.targetManager.addModelListener(
         SDK.DOMModel, SDK.DOMModel.Events.CharacterDataModified, this._onNodeChange, this);
     SDK.targetManager.addModelListener(
         SDK.DOMModel, SDK.DOMModel.Events.ChildNodeCountUpdated, this._onNodeChange, this);
     UI.context.addFlavorChangeListener(SDK.DOMNode, this._setNode, this);
     this._node = UI.context.flavor(SDK.DOMNode);
     this.update();
@@ skipping 12 matching lines @@
    * @protected
    * @return {!Promise.<?>}
    */
   doUpdate() {
     if (this._lastRequestedNode) {
       this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(Elements.PropertiesWidget._objectGroupName);
       delete this._lastRequestedNode;
     }
 
     if (!this._node) {
-      this.element.removeChildren();
+      this.contentElement.removeChildren();
       this.sections = [];
       return Promise.resolve();
     }
 
     this._lastRequestedNode = this._node;
     return this._node.resolveToObject(Elements.PropertiesWidget._objectGroupName).then(nodeResolved.bind(this));
 
     /**
      * @param {?SDK.RemoteObject} object
      * @this {Elements.PropertiesWidget}
@@ skipping 41 matching lines @@
     function fillSection(result) {
       if (!result || !result.properties)
         return;
 
       var properties = result.properties;
       var expanded = [];
       var sections = this.sections || [];
       for (var i = 0; i < sections.length; ++i)
         expanded.push(sections[i].expanded);
 
-      this.element.removeChildren();
+      this.contentElement.removeChildren();
       this.sections = [];
 
       // Get array of property user-friendly names.
       for (var i = 0; i < properties.length; ++i) {
         if (!parseInt(properties[i].name, 10))
           continue;
         var property = properties[i].value;
         var title = property.description;
         title = title.replace(/Prototype$/, '');
         var section = new ObjectUI.ObjectPropertiesSection(property, title);
         section.element.classList.add('properties-widget-section');
         this.sections.push(section);
-        this.element.appendChild(section.element);
+        this.contentElement.appendChild(section.element);
         if (expanded[this.sections.length - 1])
           section.expand();
         section.addEventListener(UI.TreeOutline.Events.ElementExpanded, this._propertyExpanded, this);
       }
     }
   }
 
   /**
    * @param {!Common.Event} event
    */
@@ skipping 11 matching lines @@
       return;
     var data = event.data;
     var node = /** @type {!SDK.DOMNode} */ (data instanceof SDK.DOMNode ? data : data.node);
     if (this._node !== node)
       return;
     this.update();
   }
 };
 
 Elements.PropertiesWidget._objectGroupName = 'properties-sidebar-pane';