DevTools: migrate SSP Classes and ElementState toolbar widgets to shadow

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

 // Copyright (c) 2015 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.
 /**
  * @unrestricted
  */
 Elements.ElementStatePaneWidget = class extends UI.Widget {
   constructor() {
-    super();
-    this.element.className = 'styles-element-state-pane';
-    this.element.createChild('div').createTextChild(Common.UIString('Force element state'));
+    super(true);
+    this.registerRequiredCSS('elements/elementStatePaneWidget.css');
+    this.contentElement.className = 'styles-element-state-pane';
+    this.contentElement.createChild('div').createTextChild(Common.UIString('Force element state'));
     var table = createElementWithClass('table', 'source-code');
 
     var inputs = [];
     this._inputs = inputs;
 
     /**
      * @param {!Event} event
      */
     function clickListener(event) {
       var node = UI.context.flavor(SDK.DOMNode);
@@ skipping 18 matching lines @@
     }
 
     var tr = table.createChild('tr');
     tr.appendChild(createCheckbox.call(null, 'active'));
     tr.appendChild(createCheckbox.call(null, 'hover'));
 
     tr = table.createChild('tr');
     tr.appendChild(createCheckbox.call(null, 'focus'));
     tr.appendChild(createCheckbox.call(null, 'visited'));
 
-    this.element.appendChild(table);
+    this.contentElement.appendChild(table);
     UI.context.addFlavorChangeListener(SDK.DOMNode, this._update, this);
   }
 
   /**
    * @param {?SDK.CSSModel} cssModel
    */
   _updateModel(cssModel) {
     if (this._cssModel === cssModel)
       return;
     if (this._cssModel)
@@ skipping 52 matching lines @@
   }
 
   /**
    * @override
    * @return {!UI.ToolbarItem}
    */
   item() {
     return this._button;
   }
 };