DevTools: migrate PropertiesWidget to shadow

BUG=726972

Review-Url: https://codereview.chromium.org/2978713002
Cr-Commit-Position: refs/heads/master@{#488482}

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

@@ -32,7 +32,8 @@
  */
 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);
@@ -65,7 +66,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget {
     }
 
     if (!this._node) {
-      this.element.removeChildren();
+      this.contentElement.removeChildren();
       this.sections = [];
       return Promise.resolve();
     }
@@ -127,7 +128,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget {
       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.
@@ -140,7 +141,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget {
         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);

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

@@ -59,11 +59,6 @@
     border-top: 1px solid #ccc;
 }
 
-.properties-widget-section {
-    padding: 2px 0px 2px 5px;
-    flex: none;
-}
-
 .elements-tree-header {
     height: 24px;
     border-top: 1px solid #eee;

third_party/WebKit/Source/devtools/front_end/elements/module.json

@@ -279,6 +279,7 @@
         "elementsTreeOutline.css",
         "metricsSidebarPane.css",
         "platformFontsWidget.css",
+        "propertiesWidget.css",
         "stylesSectionTree.css",
         "stylesSidebarPane.css"
     ]

third_party/WebKit/Source/devtools/front_end/elements/propertiesWidget.css

+/*
+ * Copyright (c) 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.properties-widget-section {
+    padding: 2px 0px 2px 5px;
+    flex: none;
+}