DevTools: migrate ComputedStyleWidget to shadow

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.ComputedStyleWidget = class extends UI.ThrottledWidget {
   constructor() {
-    super();
-    this.element.classList.add('computed-style-sidebar-pane');
-
+    super(true);
     this.registerRequiredCSS('elements/computedStyleSidebarPane.css');
     this._alwaysShowComputedProperties = {'display': true, 'height': true, 'width': true};
 
     this._computedStyleModel = new Elements.ComputedStyleModel();
     this._computedStyleModel.addEventListener(
         Elements.ComputedStyleModel.Events.ComputedStyleChanged, this.update, this);
 
     this._showInheritedComputedStylePropertiesSetting =
         Common.settings.createSetting('showInheritedComputedStyleProperties', false);
     this._showInheritedComputedStylePropertiesSetting.addChangeListener(
         this._showInheritedComputedStyleChanged.bind(this));
 
-    var hbox = this.element.createChild('div', 'hbox styles-sidebar-pane-toolbar');
+    var hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
     var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement(
-        Common.UIString('Filter'), hbox, filterCallback.bind(this));
+        Common.UIString('Filter'), hbox, filterCallback.bind(this), 'styles-filter-engaged');
     UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Computed Styles'));
     filterContainerElement.appendChild(filterInput);
 
     var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);
     toolbar.appendToolbarItem(new UI.ToolbarSettingCheckbox(
         this._showInheritedComputedStylePropertiesSetting, undefined, Common.UIString('Show all')));
 
     this._propertiesOutline = new UI.TreeOutlineInShadow();
     this._propertiesOutline.hideOverflow();
-    this._propertiesOutline.registerRequiredCSS('elements/computedStyleSidebarPane.css');
+    this._propertiesOutline.registerRequiredCSS('elements/computedStyleWidgetTree.css');
     this._propertiesOutline.element.classList.add('monospace', 'computed-properties');
-    this.element.appendChild(this._propertiesOutline.element);
+    this.contentElement.appendChild(this._propertiesOutline.element);
 
     this._linkifier = new Components.Linkifier(Elements.ComputedStyleWidget._maxLinkLength);
 
     /**
      * @param {?RegExp} regex
      * @this {Elements.ComputedStyleWidget}
      */
     function filterCallback(regex) {
       this._filterRegex = regex;
       this._updateFilter(regex);
     }
 
     var fontsWidget = new Elements.PlatformFontsWidget(this._computedStyleModel);
-    fontsWidget.show(this.element);
+    fontsWidget.show(this.contentElement);
   }
 
   _showInheritedComputedStyleChanged() {
     this.update();
   }
 
   /**
    * @override
    * @return {!Promise.<?>}
    */
@@ skipping 251 matching lines @@
       var property = child[Elements.ComputedStyleWidget._propertySymbol];
       var matched = !regex || regex.test(property.name) || regex.test(property.value);
       child.hidden = !matched;
     }
   }
 };
 
 Elements.ComputedStyleWidget._maxLinkLength = 30;
 
 Elements.ComputedStyleWidget._propertySymbol = Symbol('property');