| 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..308f43e5f6ce62d1697b06e5891bebae9d6194a4 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,14 @@
 | 
|  /**
 | 
|   * @implements {UI.ContextFlavorListener}
 | 
|   */
 | 
| -Components.DOMBreakpointsSidebarPane = class extends Components.BreakpointsSidebarPaneBase {
 | 
| +Components.DOMBreakpointsSidebarPane = class extends UI.VBox {
 | 
|    constructor() {
 | 
| -    super();
 | 
| -    this.registerRequiredCSS('components/breakpointsList.css');
 | 
| -    this.listElement.classList.add('dom-breakpoints-list');
 | 
| +    super(true);
 | 
| +    this.registerRequiredCSS('components/domBreakpointsSidebarPane.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<!SDK.DOMDebuggerModel.DOMBreakpoint, !Components.DOMBreakpointsSidebarPane.Item>} */
 | 
|      this._items = new Map();
 | 
| @@ -117,16 +120,20 @@ 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._emptyElement.classList.remove('hidden');
 | 
| +      this._listElement.classList.add('hidden');
 | 
| +    }
 | 
|    }
 | 
|  
 | 
|    /**
 | 
|     * @param {!SDK.DOMDebuggerModel.DOMBreakpoint} breakpoint
 | 
|     */
 | 
|    _addBreakpoint(breakpoint) {
 | 
| -    var element = createElement('li');
 | 
| +    var element = createElementWithClass('div', 'breakpoint-entry');
 | 
|      element.addEventListener('contextmenu', this._contextMenu.bind(this, breakpoint), true);
 | 
|  
 | 
|      var checkboxLabel = UI.CheckboxLabel.create('', breakpoint.enabled);
 | 
| @@ -150,13 +157,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);
 | 
| +    this._emptyElement.classList.add('hidden');
 | 
| +    this._listElement.classList.remove('hidden');
 | 
|    }
 | 
|  
 | 
|    /**
 | 
| 
 |