DevTools: migrate SSP Classes and ElementState toolbar widgets to shadow

third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.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.ClassesPaneWidget = class extends UI.Widget {
   constructor() {
-    super();
-    this.element.className = 'styles-element-classes-pane';
-    var container = this.element.createChild('div', 'title-container');
+    super(true);
+    this.registerRequiredCSS('elements/classesPaneWidget.css');
+    this.contentElement.className = 'styles-element-classes-pane';
+    var container = this.contentElement.createChild('div', 'title-container');
     this._input = container.createChild('div', 'new-class-input monospace');
     this.setDefaultFocusedElement(this._input);
-    this._classesContainer = this.element.createChild('div', 'source-code');
+    this._classesContainer = this.contentElement.createChild('div', 'source-code');
     this._classesContainer.classList.add('styles-element-classes-container');
     this._prompt = new Elements.ClassesPaneWidget.ClassNamePrompt();
     this._prompt.setAutocompletionTimeout(0);
     this._prompt.renderAsBlock();
 
     var proxyElement = this._prompt.attach(this._input);
     this._prompt.setPlaceholder(Common.UIString('Add new class'));
     this._prompt.addEventListener(UI.TextPrompt.Events.TextChanged, this._onTextChanged, this);
     proxyElement.addEventListener('keydown', this._onKeyDown.bind(this), false);
 
@@ skipping 286 matching lines @@
     if (!this._classNamesPromise || this._selectedFrameId !== selectedNode.frameId())
       this._classNamesPromise = this._getClassNames(selectedNode);
 
     return this._classNamesPromise.then(completions => {
       if (prefix[0] === '.')
         completions = completions.map(value => '.' + value);
       return completions.filter(value => value.startsWith(prefix)).map(completion => ({text: completion}));
     });
   }
 };