DevTools: migrate WatchExpressionsSidebarPane to shadow

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

Index: third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
index 7685f595abb8697762a3b5e246604e826d750d54..b4f74a8a71a4cb4f2f1d85d85781a53b7c26d48f 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
@@ -35,8 +35,9 @@
  */
 Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
   constructor() {
-    super();
+    super(true);
     this.registerRequiredCSS('object_ui/objectValue.css');
+    this.registerRequiredCSS('sources/watchExpressionsSidebarPane.css');
 
     /** @type {!Array.<!Sources.WatchExpression>} */
     this._watchExpressions = [];
@@ -47,8 +48,8 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
     this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
     this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this.update, this);
 
-    this._bodyElement = this.element.createChild('div', 'vbox watch-expressions');
-    this._bodyElement.addEventListener('contextmenu', this._contextMenu.bind(this), false);
+    this.contentElement.classList.add('watch-expressions');
+    this.contentElement.addEventListener('contextmenu', this._contextMenu.bind(this), false);
     this._expandController = new ObjectUI.ObjectPropertiesSectionExpandController();
 
     UI.context.addFlavorChangeListener(SDK.ExecutionContext, this.update, this);
@@ -93,9 +94,9 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
    */
   doUpdate() {
     this._linkifier.reset();
-    this._bodyElement.removeChildren();
+    this.contentElement.removeChildren();
     this._watchExpressions = [];
-    this._emptyElement = this._bodyElement.createChild('div', 'gray-info-message');
+    this._emptyElement = this.contentElement.createChild('div', 'gray-info-message');
     this._emptyElement.textContent = Common.UIString('No Watch Expressions');
     var watchExpressionStrings = this._watchExpressionsSetting.get();
     for (var i = 0; i < watchExpressionStrings.length; ++i) {
@@ -117,7 +118,7 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
     var watchExpression = new Sources.WatchExpression(expression, this._expandController, this._linkifier);
     watchExpression.addEventListener(
         Sources.WatchExpression.Events.ExpressionUpdated, this._watchExpressionUpdated, this);
-    this._bodyElement.appendChild(watchExpression.element());
+    this.contentElement.appendChild(watchExpression.element());
     this._watchExpressions.push(watchExpression);
     return watchExpression;
   }
@@ -129,7 +130,7 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
     var watchExpression = /** @type {!Sources.WatchExpression} */ (event.data);
     if (!watchExpression.expression()) {
       this._watchExpressions.remove(watchExpression);
-      this._bodyElement.removeChild(watchExpression.element());
+      this.contentElement.removeChild(watchExpression.element());
       this._emptyElement.classList.toggle('hidden', !!this._watchExpressions.length);
     }