DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

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

Index: third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
index e80946460c8310b373d38c4d8200f8a365129025..7a05db3b0f2a87115e8de2cfd5ffd9ce307f0d59 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
@@ -6,16 +6,22 @@
  * @implements {UI.ToolbarItem.ItemsProvider}
  * @unrestricted
  */
-Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarPaneBase {
+Sources.XHRBreakpointsSidebarPane = class extends UI.VBox {
   constructor() {
-    super();
+    super(true);
+    this.registerRequiredCSS('sources/xhrBreakpointsSidebarPane.css');
+
+    this._listElement = this.contentElement.createChild('div', 'breakpoint-list hidden');
+    this._emptyElement = this.contentElement.createChild('div', 'gray-info-message');
+    this._emptyElement.textContent = Common.UIString('No Breakpoints');
+
     /** @type {!Map.<string, !Element>} */
     this._breakpointElements = new Map();
 
     this._addButton = new UI.ToolbarButton(Common.UIString('Add breakpoint'), 'largeicon-add');
     this._addButton.addEventListener(UI.ToolbarButton.Events.Click, this._addButtonClicked.bind(this));
 
-    this.emptyElement.addEventListener('contextmenu', this._emptyElementContextMenu.bind(this), true);
+    this._emptyElement.addEventListener('contextmenu', this._emptyElementContextMenu.bind(this), true);
     this._restoreBreakpoints();
     this._update();
   }
@@ -40,9 +46,8 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
     var inputElementContainer = createElementWithClass('p', 'breakpoint-condition');
     inputElementContainer.textContent = Common.UIString('Break when URL contains:');
 
-    var inputElement = inputElementContainer.createChild('span');
-    inputElement.id = 'breakpoint-condition-input';
-    this.addListElement(inputElementContainer, /** @type {?Element} */ (this.listElement.firstChild));
+    var inputElement = inputElementContainer.createChild('span', 'breakpoint-condition-input');
+    this._addListElement(inputElementContainer, /** @type {?Element} */ (this._listElement.firstChild));
 
     /**
      * @param {boolean} accept
@@ -51,7 +56,7 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
      * @this {Sources.XHRBreakpointsSidebarPane}
      */
     function finishEditing(accept, e, text) {
-      this.removeListElement(inputElementContainer);
+      this._removeListElement(inputElementContainer);
       if (accept) {
         SDK.domDebuggerManager.addXHRBreakpoint(text, true);
         this._setBreakpoint(text, true);
@@ -72,7 +77,7 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
       return;
     }
 
-    var element = createElement('li');
+    var element = createElementWithClass('div', 'breakpoint-entry');
     element._url = url;
     element.addEventListener('contextmenu', this._contextMenu.bind(this, url), true);
 
@@ -85,13 +90,13 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
     label.classList.add('cursor-auto');
     label.textElement.addEventListener('dblclick', this._labelClicked.bind(this, url), false);
 
-    var currentElement = /** @type {?Element} */ (this.listElement.firstChild);
+    var currentElement = /** @type {?Element} */ (this._listElement.firstChild);
     while (currentElement) {
       if (currentElement._url && currentElement._url < element._url)
         break;
       currentElement = /** @type {?Element} */ (currentElement.nextSibling);
     }
-    this.addListElement(element, currentElement);
+    this._addListElement(element, currentElement);
     this._breakpointElements.set(url, element);
   }
 
@@ -103,10 +108,31 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
     if (!element)
       return;
 
-    this.removeListElement(element);
+    this._removeListElement(element);
     this._breakpointElements.delete(url);
   }
 
+  /**
+   * @param {!Element} element
+   * @param {?Node} beforeNode
+   */
+  _addListElement(element, beforeNode) {
+    this._listElement.insertBefore(element, beforeNode);
+    this._emptyElement.classList.add('hidden');
+    this._listElement.classList.remove('hidden');
+  }
+
+  /**
+   * @param {!Element} element
+   */
+  _removeListElement(element) {
+    this._listElement.removeChild(element);
+    if (!this._listElement.firstChild) {
+      this._emptyElement.classList.remove('hidden');
+      this._listElement.classList.add('hidden');
+    }
+  }
+
   _contextMenu(url, event) {
     var contextMenu = new UI.ContextMenu(event);
 
@@ -143,7 +169,7 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
     var element = this._breakpointElements.get(url) || null;
     var inputElement = createElementWithClass('span', 'breakpoint-condition');
     inputElement.textContent = url;
-    this.listElement.insertBefore(inputElement, element);
+    this._listElement.insertBefore(inputElement, element);
     element.classList.add('hidden');
 
     /**
@@ -153,7 +179,7 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
      * @this {Sources.XHRBreakpointsSidebarPane}
      */
     function finishEditing(accept, e, text) {
-      this.removeListElement(inputElement);
+      this._removeListElement(inputElement);
       if (accept) {
         SDK.domDebuggerManager.removeXHRBreakpoint(url);
         this._removeBreakpoint(url);