DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

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

 /*
  * Copyright (C) 2011 Google Inc. 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 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @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();
     SDK.targetManager.addModelListener(
         SDK.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointAdded, this._breakpointAdded, this);
     SDK.targetManager.addModelListener(
         SDK.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointToggled, this._breakpointToggled, this);
     SDK.targetManager.addModelListener(
         SDK.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointsRemoved, this._breakpointsRemoved, this);
 
@@ skipping 61 matching lines @@
 
   /**
    * @param {!Common.Event} event
    */
   _breakpointsRemoved(event) {
     var breakpoints = /** @type {!Array<!SDK.DOMDebuggerModel.DOMBreakpoint>} */ (event.data);
     for (var breakpoint of breakpoints) {
       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.

   }
 
   /**
    * @param {!SDK.DOMDebuggerModel.DOMBreakpoint} breakpoint
    */
   _addBreakpoint(breakpoint) {
     var element = createElement('li');
     element.addEventListener('contextmenu', this._contextMenu.bind(this, breakpoint), true);
 
     var checkboxLabel = UI.CheckboxLabel.create('', breakpoint.enabled);
@@ skipping 10 matching lines @@
     labelElement.appendChild(linkifiedNode);
 
     var description = createElement('div');
     description.textContent = Components.DOMBreakpointsSidebarPane.BreakpointTypeLabels.get(breakpoint.type);
     labelElement.appendChild(description);
 
     var item = {breakpoint: breakpoint, element: element, checkbox: checkboxElement};
     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);
   }
 
   /**
    * @param {!SDK.DOMDebuggerModel.DOMBreakpoint} breakpoint
    * @param {!Event} event
    */
   _contextMenu(breakpoint, event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItem(Common.UIString.capitalize('Remove ^breakpoint'), () => {
       breakpoint.domDebuggerModel.removeDOMBreakpoint(breakpoint.node, breakpoint.type);
@@ skipping 96 matching lines @@
 
     var breakpointsMenu = contextMenu.appendSubMenuItem(Common.UIString('Break on...'));
     for (var key in SDK.DOMDebuggerModel.DOMBreakpoint.Type) {
       var type = SDK.DOMDebuggerModel.DOMBreakpoint.Type[key];
       var label = Components.DOMBreakpointsSidebarPane.BreakpointTypeNouns.get(type);
       breakpointsMenu.appendCheckboxItem(
           label, toggleBreakpoint.bind(null, type), domDebuggerModel.hasDOMBreakpoint(node, type));
     }
   }
 };