DevTools: migrate ScopeChainSidebarPane to shadow

third_party/WebKit/Source/devtools/front_end/sources/ScopeChainSidebarPane.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * 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.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 11 matching lines @@
  * 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.
  */
 /**
  * @implements {UI.ContextFlavorListener}
  * @unrestricted
  */
 Sources.ScopeChainSidebarPane = class extends UI.VBox {
   constructor() {
-    super();
+    super(true);
+    this.registerRequiredCSS('sources/scopeChainSidebarPane.css');
     this._expandController = new ObjectUI.ObjectPropertiesSectionExpandController();
     this._linkifier = new Components.Linkifier();
     this._update();
   }
 
   /**
    * @override
    * @param {?Object} object
    */
   flavorChanged(object) {
     this._update();
   }
 
   _update() {
     var callFrame = UI.context.flavor(SDK.DebuggerModel.CallFrame);
     var details = UI.context.flavor(SDK.DebuggerPausedDetails);
     this._linkifier.reset();
     Sources.SourceMapNamesResolver.resolveThisObject(callFrame).then(this._innerUpdate.bind(this, details, callFrame));
   }
 
   /**
    * @param {?SDK.DebuggerPausedDetails} details
    * @param {?SDK.DebuggerModel.CallFrame} callFrame
    * @param {?SDK.RemoteObject} thisObject
    */
   _innerUpdate(details, callFrame, thisObject) {
-    this.element.removeChildren();
+    this.contentElement.removeChildren();
 
     if (!details || !callFrame) {
       var infoElement = createElement('div');
       infoElement.className = 'gray-info-message';
       infoElement.textContent = Common.UIString('Not Paused');
-      this.element.appendChild(infoElement);
+      this.contentElement.appendChild(infoElement);
       return;
     }
 
     var foundLocalScope = false;
     var scopeChain = callFrame.scopeChain();
     for (var i = 0; i < scopeChain.length; ++i) {
       var scope = scopeChain[i];
       var title = scope.typeName();
       var emptyPlaceholder = null;
       var extraProperties = [];
@@ skipping 41 matching lines @@
           Sources.SourceMapNamesResolver.resolveScopeInObject(scope), titleElement, this._linkifier, emptyPlaceholder,
           true, extraProperties);
       this._expandController.watchSection(title + (subtitle ? ':' + subtitle : ''), section);
 
       if (scope.type() === Protocol.Debugger.ScopeType.Global)
         section.objectTreeElement().collapse();
       else if (!foundLocalScope || scope.type() === Protocol.Debugger.ScopeType.Local)
         section.objectTreeElement().expand();
 
       section.element.classList.add('scope-chain-sidebar-pane-section');
-      this.element.appendChild(section.element);
+      this.contentElement.appendChild(section.element);
     }
     this._sidebarPaneUpdatedForTest();
   }
 
   _sidebarPaneUpdatedForTest() {
   }
 };
 
 Sources.ScopeChainSidebarPane._pathSymbol = Symbol('path');