DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
index 2b55e54369230202f0d3bb68280fa54e961f2c47..3b05e47ee1517ed455a41b89ca6f03f7c2212a29 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -31,11 +31,15 @@
 /**
  * @implements {UI.ContextFlavorListener}
  */
-Components.DOMBreakpointsSidebarPane = class extends Components.BreakpointsSidebarPaneBase {
+Components.DOMBreakpointsSidebarPane = class extends UI.VBox {
   constructor() {
-    super();
+    super(true);
     this.registerRequiredCSS('components/breakpointsList.css');
-    this.listElement.classList.add('dom-breakpoints-list');
+    this.registerRequiredCSS('components/domBreakpointsSidebarPane.css');
+
+    this._listElement = createElementWithClass('ol', 'breakpoint-list');

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

While we are here, let's change ol to 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<!SDK.DOMDebuggerModel.DOMBreakpoint, !Components.DOMBreakpointsSidebarPane.Item>} */
     this._items = new Map();
@@ -117,9 +121,11 @@ Components.DOMBreakpointsSidebarPane = class extends Components.BreakpointsSideb
       var item = this._items.get(breakpoint);
       if (item) {
         this._items.delete(breakpoint);
-        this.removeListElement(item.element);
+        this._listElement.removeChild(item.element);
       }
     }
+    if (!this._listElement.firstChild && this._listElement.parentElement === this.contentElement)
+      this.contentElement.replaceChild(this._emptyElement, this._listElement);

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

Just toggle a hidden class and leave them both in DOM?

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

Done.  Yeah, that's simpler.

   }
 
   /**
@@ -150,13 +156,15 @@ Components.DOMBreakpointsSidebarPane = class extends Components.BreakpointsSideb
     element._item = item;
     this._items.set(breakpoint, item);
 
-    var currentElement = this.listElement.firstChild;
+    var currentElement = this._listElement.firstChild;
     while (currentElement) {
       if (currentElement._item && currentElement._item.breakpoint.type < breakpoint.type)
         break;
       currentElement = currentElement.nextSibling;
     }
-    this.addListElement(element, currentElement);
+    this._listElement.insertBefore(element, currentElement);
+    if (this._emptyElement.parentElement === this.contentElement)
+      this.contentElement.replaceChild(this._listElement, this._emptyElement);
   }
 
   /**