DevTools: migrate WatchExpressionsSidebarPane to shadow

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

 /*
  * Copyright (C) IBM Corp. 2009  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 17 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 /**
  * @implements {UI.ActionDelegate}
  * @implements {UI.ToolbarItem.ItemsProvider}
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted
  */
 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 = [];
     this._watchExpressionsSetting = Common.settings.createLocalSetting('watchExpressions', []);
 
     this._addButton = new UI.ToolbarButton(Common.UIString('Add expression'), 'largeicon-add');
     this._addButton.addEventListener(UI.ToolbarButton.Events.Click, this._addButtonClicked.bind(this));
     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);
     UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.update, this);
     this._linkifier = new Components.Linkifier();
     this.update();
   }
 
   /**
    * @override
@@ skipping 24 matching lines @@
     UI.viewManager.showView('sources.watch');
     this._createWatchExpression(null).startEditing();
   }
 
   /**
    * @override
    * @return {!Promise.<?>}
    */
   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) {
       var expression = watchExpressionStrings[i];
       if (!expression)
         continue;
 
       this._createWatchExpression(expression);
     }
     return Promise.resolve();
   }
 
   /**
    * @param {?string} expression
    * @return {!Sources.WatchExpression}
    */
   _createWatchExpression(expression) {
     this._emptyElement.classList.add('hidden');
     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;
   }
 
   /**
    * @param {!Common.Event} event
    */
   _watchExpressionUpdated(event) {
     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);
     }
 
     this._saveExpressions();
   }
 
   /**
    * @param {!Event} event
    */
   _contextMenu(event) {
@@ skipping 278 matching lines @@
     InspectorFrontendHost.copyText(this._valueElement.textContent);
   }
 };
 
 Sources.WatchExpression._watchObjectGroupId = 'watch-group';
 
 /** @enum {symbol} */
 Sources.WatchExpression.Events = {
   ExpressionUpdated: Symbol('ExpressionUpdated')
 };