DevTools: migrate StylesSidebarPane to shadow

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.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 13 matching lines @@
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * 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.
  */
 
 Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
     super();
     this.setMinimumSize(96, 26);
+    this.registerRequiredCSS('elements/stylesSidebarPane.css');
 
     Common.moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
     Common.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this));
 
     /** @type {?UI.Widget} */
     this._currentToolbarPane = null;
     /** @type {?UI.Widget} */
     this._animatedToolbarPane = null;
     /** @type {?UI.Widget} */
     this._pendingWidget = null;
     /** @type {?UI.ToolbarToggle} */
     this._pendingWidgetToggle = null;
     this._toolbarPaneElement = this._createStylesSidebarToolbar();
-    this._sectionsContainer = this.element.createChild('div');
+    this._sectionsContainer = this.contentElement.createChild('div');
     this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper();
     this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLinkLength, /* useLinkDecorator */ true);
     /** @type {?Elements.StylePropertyHighlighter} */
     this._decorator = null;
     this._userOperation = false;
     this._isEditingStyle = false;
     /** @type {?RegExp} */
     this._filterRegex = null;
 
     /** @type {?Elements.StylePropertyTreeElement} */
     this._mouseDownTreeElement = null;
     this._mouseDownTreeElementIsName = false;
     this._mouseDownTreeElementIsValue = false;
 
-    this.element.classList.add('styles-pane');
+    this.contentElement.classList.add('styles-pane');
 
     /** @type {!Array<!Elements.SectionBlock>} */
     this._sectionBlocks = [];
     Elements.StylesSidebarPane._instance = this;
     UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this);
-    this.element.addEventListener('copy', this._clipboardCopy.bind(this));
+    this.contentElement.addEventListener('copy', this._clipboardCopy.bind(this));
     this._resizeThrottler = new Common.Throttler(100);
   }
 
   /**
    * @param {!SDK.CSSProperty} property
    * @return {!Element}
    */
   static createExclamationMark(property) {
     var exclamationElement = createElement('label', 'dt-icon-label');
     exclamationElement.className = 'exclamation-mark';
@@ skipping 190 matching lines @@
    * @override
    */
   onResize() {
     this._resizeThrottler.schedule(this._innerResize.bind(this));
   }
 
   /**
    * @return {!Promise}
    */
   _innerResize() {
-    var width = this.element.getBoundingClientRect().width + 'px';
+    var width = this.contentElement.getBoundingClientRect().width + 'px';
     this.allSections().forEach(section => section.propertiesTreeOutline.element.style.width = width);
     return Promise.resolve();
   }
 
   _resetCache() {
     if (this.cssModel())
       this.cssModel().discardCachedMatchedCascade();
   }
 
   /**
@@ skipping 15 matching lines @@
       return matchedStyles && matchedStyles.node() === this.node() ? matchedStyles : null;
     }
   }
 
   /**
    * @param {boolean} editing
    */
   setEditingStyle(editing) {
     if (this._isEditingStyle === editing)
       return;
-    this.element.classList.toggle('is-editing-style', editing);
+    this.contentElement.classList.toggle('is-editing-style', editing);
     this._isEditingStyle = editing;
   }
 
   /**
    * @override
    * @param {!Common.Event=} event
    */
   onCSSModelChanged(event) {
     var edit = event && event.data ? /** @type {?SDK.CSSModel.Edit} */ (event.data.edit) : null;
     if (edit) {
@@ skipping 195 matching lines @@
    * @param {!Event} event
    */
   _clipboardCopy(event) {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleCopied);
   }
 
   /**
    * @return {!Element}
    */
   _createStylesSidebarToolbar() {
-    var container = this.element.createChild('div', 'styles-sidebar-pane-toolbar-container');
+    var container = this.contentElement.createChild('div', 'styles-sidebar-pane-toolbar-container');
     var hbox = container.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, this._onFilterChanged.bind(this), 'styles-filter-engaged');
     UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Styles'));
     filterContainerElement.appendChild(filterInput);
     var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);
     toolbar.makeToggledGray();
     toolbar.appendLocationItems('styles-sidebarpane-toolbar');
     var toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
@@ skipping 2693 matching lines @@
   }
 
   /**
    * @override
    * @return {!UI.ToolbarItem}
    */
   item() {
     return this._button;
   }
 };