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..d5a75397cda53ab8d1c02b42c96613e4414b1064 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('components/breakpointsList.css');
+
+    this._listElement = createElementWithClass('ol', 'breakpoint-list');

[dgozman, 2017/05/30 21:53:39]

ol -> div

[luoe, 2017/05/31 03:09:24]

Done.

+    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();
   }
@@ -42,7 +48,7 @@ Sources.XHRBreakpointsSidebarPane = class extends Components.BreakpointsSidebarP
 
     var inputElement = inputElementContainer.createChild('span');
     inputElement.id = 'breakpoint-condition-input';
-    this.addListElement(inputElementContainer, /** @type {?Element} */ (this.listElement.firstChild));
+    this._addListElement(inputElementContainer, /** @type {?Element} */ (this._listElement.firstChild));
 
     /**
      * @param {boolean} accept
@@ -51,7 +57,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);
@@ -85,13 +91,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 +109,26 @@ 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);
+    if (this._emptyElement.parentElement === this.contentElement)
+      this.contentElement.replaceChild(this._listElement, this._emptyElement);

[dgozman, 2017/05/30 21:53:39]

Toggle hidden class.

[luoe, 2017/05/31 03:09:24]

Done.

+  }
+
+  _removeListElement(element) {
+    this._listElement.removeChild(element);
+    if (!this._listElement.firstChild && this._listElement.parentElement === this.contentElement)
+      this.contentElement.replaceChild(this._emptyElement, this._listElement);
+  }
+
   _contextMenu(url, event) {
     var contextMenu = new UI.ContextMenu(event);
 
@@ -143,7 +165,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 +175,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);