DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

JavaScriptBreakpointsSidebarPane, DOMBreakpointsSidebarPane, and
XHRBreakpointsSidebarPane now have their own stylesheets, and all are
encapsulated with shadow DOM.

BUG=none

Review-Url: https://codereview.chromium.org/2900843002
Cr-Commit-Position: refs/heads/master@{#476535}

third_party/WebKit/Source/devtools/BUILD.gn

@@ -125,10 +125,9 @@ all_devtools_files = [
   "front_end/common/Trie.js",
   "front_end/common/UIString.js",
   "front_end/common/Worker.js",
-  "front_end/components/breakpointsList.css",
-  "front_end/components/BreakpointsSidebarPaneBase.js",
   "front_end/components/DataSaverInfobar.js",
   "front_end/components/DockController.js",
+  "front_end/components/domBreakpointsSidebarPane.css",
   "front_end/components/DOMBreakpointsSidebarPane.js",
   "front_end/components/DOMPresentationUtils.js",
   "front_end/components/domUtils.css",
@@ -558,6 +557,7 @@ all_devtools_files = [
   "front_end/sources/FilteredUISourceCodeListProvider.js",
   "front_end/sources/GoToLineQuickOpen.js",
   "front_end/sources/InplaceFormatterEditorAction.js",
+  "front_end/sources/javaScriptBreakpointsSidebarPane.css",
   "front_end/sources/JavaScriptBreakpointsSidebarPane.js",
   "front_end/sources/JavaScriptCompiler.js",
   "front_end/sources/JavaScriptSourceFrame.js",
@@ -591,6 +591,7 @@ all_devtools_files = [
   "front_end/sources/watchExpressionsSidebarPane.css",
   "front_end/sources/WatchExpressionsSidebarPane.js",
   "front_end/sources/WorkspaceMappingTip.js",
+  "front_end/sources/xhrBreakpointsSidebarPane.css",
   "front_end/sources/XHRBreakpointsSidebarPane.js",
   "front_end/terminal/terminal.css",
   "front_end/terminal/TerminalWidget.js",

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

-/*
- * Copyright (C) 2012 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
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * 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.
- */
-
-/**
- * @unrestricted
- */
-Components.BreakpointsSidebarPaneBase = class extends UI.VBox {
-  constructor() {
-    super();
-    this.registerRequiredCSS('components/breakpointsList.css');
-
-    this.listElement = createElement('ol');
-    this.listElement.className = 'breakpoint-list';
-
-    this.emptyElement = createElement('div');
-    this.emptyElement.className = 'gray-info-message';
-    this.emptyElement.textContent = Common.UIString('No Breakpoints');
-
-    this.element.appendChild(this.emptyElement);
-  }
-
-  /**
-   * @param {!Element} element
-   * @param {?Node=} beforeNode
-   * @protected
-   */
-  addListElement(element, beforeNode) {
-    if (beforeNode) {
-      this.listElement.insertBefore(element, beforeNode);
-    } else {
-      if (!this.listElement.firstChild) {
-        this.element.removeChild(this.emptyElement);
-        this.element.appendChild(this.listElement);
-      }
-      this.listElement.appendChild(element);
-    }
-  }
-
-  /**
-   * @param {!Element} element
-   * @protected
-   */
-  removeListElement(element) {
-    this.listElement.removeChild(element);
-    if (!this.listElement.firstChild) {
-      this.element.removeChild(this.listElement);
-      this.element.appendChild(this.emptyElement);
-    }
-  }
-
-  /**
-   * @protected
-   */
-  reset() {
-    this.listElement.removeChildren();
-    if (this.listElement.parentElement) {
-      this.element.removeChild(this.listElement);
-      this.element.appendChild(this.emptyElement);
-    }
-  }
-};

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');
   }
 
   /**

third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css

-/*
- * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT 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.
- */
-
-.breakpoint-entry {
-    padding: 3px 8px 3px 8px;
-    min-height: 18px;
-    line-height: 15px;
-    border-top: 1px solid #efefef;
-}
-
-.breakpoint-entry [is=dt-checkbox] {
-    max-width: 100%;
-}
-
-.breakpoint-entry label {
-     white-space: nowrap;
-}
-
-:not(.breakpoints-list-deactivated) > .breakpoint-entry:hover {
-    background-color: #eee;
-}
-
-.breakpoint-entry > .source-text {
-    cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.breakpoint-condition {
-    display: block;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    margin-left: 23px;
-    margin-right: 8px;
-}
-
-.breakpoint-list .editing.being-edited {
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-#breakpoint-condition-input {
-    display: block;
-    margin-left: 0;
-    margin-right: 0;
-    outline: none !important;
-    border: 1px solid rgb(66%, 66%, 66%);
-}
-
-ol.breakpoint-list {
-    -webkit-padding-start: 0;
-    list-style: none;
-    margin: 0;
-    padding-bottom: 3px;
-}
-
-.breakpoints-list-deactivated {
-    background-color: #eee;
-    opacity: 0.3;
-}
-
-.breakpoint-list li {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: 2px 0;
-}
-
-.breakpoint-list li:hover {
-    background-color: #eee;
-}
-
-.breakpoint-list .source-text {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin: 2px 0 0 20px;
-}
-
-.breakpoint-hit {
-    background-color: rgb(255, 255, 194);
-}
-
-.-theme-with-dark-background .sidebar-pane .breakpoint-hit {
-    background-color: hsl(46, 98%, 22%);
-    color: #ccc;
-}
-
-li.breakpoint-hit .breakpoint-hit-marker {
-    background-color: rgb(255, 255, 194);
-    height: 18px;
-    left: 0;
-    margin-top: -16px;
-    position: absolute;
-    right: 0;
-    z-index: -1;
-}
-
-.dom-breakpoints-list > li {
-    display: flex;
-}
-
-.dom-breakpoints-list .dom-breakpoint > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

third_party/WebKit/Source/devtools/front_end/components/domBreakpointsSidebarPane.css

+/*
+ * Copyright 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.breakpoint-list {
+    padding-bottom: 3px;
+}
+
+.breakpoint-list .dom-breakpoint > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.breakpoint-entry {
+    display: flex;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 2px 0;
+}
+
+.breakpoint-list .breakpoint-entry:hover {
+    background-color: #eee;
+}
+
+.breakpoint-hit {
+    background-color: rgb(255, 255, 194);
+}
+
+:host-context(.-theme-with-dark-background) .breakpoint-hit {
+    background-color: hsl(46, 98%, 22%);
+    color: #ccc;
+}

third_party/WebKit/Source/devtools/front_end/components/module.json

@@ -47,7 +47,6 @@
         "network_log"
     ],
     "scripts": [
-        "BreakpointsSidebarPaneBase.js",
         "DataSaverInfobar.js",
         "DOMBreakpointsSidebarPane.js",
         "DOMPresentationUtils.js",
@@ -56,7 +55,7 @@
         "Reload.js"
     ],
     "resources": [
-        "breakpointsList.css",
+        "domBreakpointsSidebarPane.css",
         "domUtils.css",
         "imagePreview.css"
     ]

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

@@ -7,8 +7,6 @@
 Sources.EventListenerBreakpointsSidebarPane = class extends UI.VBox {
   constructor() {
     super(true);
-    this.registerRequiredCSS('components/breakpointsList.css');
-
     this._categoriesTreeOutline = new UI.TreeOutlineInShadow();
     this._categoriesTreeOutline.element.tabIndex = 0;
     this._categoriesTreeOutline.registerRequiredCSS('sources/eventListenerBreakpoints.css');

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

@@ -8,7 +8,7 @@
 Sources.JavaScriptBreakpointsSidebarPane = class extends UI.ThrottledWidget {
   constructor() {
     super(true);
-    this.registerRequiredCSS('components/breakpointsList.css');
+    this.registerRequiredCSS('sources/javaScriptBreakpointsSidebarPane.css');
 
     this._breakpointManager = Bindings.breakpointManager;
     this._breakpointManager.addEventListener(Bindings.BreakpointManager.Events.BreakpointAdded, this.update, this);

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);

third_party/WebKit/Source/devtools/front_end/sources/javaScriptBreakpointsSidebarPane.css

+/*
+ * Copyright 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.breakpoint-entry {
+    padding: 3px 8px 3px 8px;
+    min-height: 18px;
+    line-height: 15px;
+    border-top: 1px solid #efefef;
+}
+
+.breakpoint-entry [is=dt-checkbox] {
+    max-width: 100%;
+    white-space: nowrap;
+}
+
+:not(.breakpoints-list-deactivated) > .breakpoint-entry:hover {
+    background-color: #eee;
+}
+
+.breakpoint-entry > .source-text {
+    cursor: pointer;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.breakpoints-list-deactivated {
+    background-color: #eee;
+    opacity: 0.3;
+}
+
+.breakpoint-hit {
+    background-color: rgb(255, 255, 194);
+}
+
+:host-context(.-theme-with-dark-background) .breakpoint-hit {
+    background-color: hsl(46, 98%, 22%);
+    color: #ccc;
+}

third_party/WebKit/Source/devtools/front_end/sources/module.json

@@ -661,6 +661,7 @@
         "debuggerPausedMessage.css",
         "eventListenerBreakpoints.css",
         "fileBasedSearchResultsPane.css",
+        "javaScriptBreakpointsSidebarPane.css",
         "navigatorTree.css",
         "navigatorView.css",
         "revisionHistory.css",
@@ -671,6 +672,7 @@
         "sourcesView.css",
         "threadsSidebarPane.css",
         "watchExpressionsSidebarPane.css",
+        "xhrBreakpointsSidebarPane.css",
         "dialog.css"
     ]
 }

third_party/WebKit/Source/devtools/front_end/sources/xhrBreakpointsSidebarPane.css

+/*
+ * Copyright 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.breakpoint-list {
+    padding-bottom: 3px;
+}
+
+.breakpoint-list .editing.being-edited {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.breakpoint-condition {
+    display: block;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    margin-left: 23px;
+    margin-right: 8px;
+}
+
+.breakpoint-condition-input {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    outline: none !important;
+    border: 1px solid rgb(66%, 66%, 66%);
+}
+
+.breakpoint-entry {
+    white-space: nowrap;
+    padding: 2px 0;
+}
+
+.breakpoint-list .breakpoint-entry:hover {
+    background-color: #eee;
+}
+
+.breakpoint-entry [is=dt-checkbox] {
+    max-width: 100%;
+}
+
+.breakpoint-hit {
+    background-color: rgb(255, 255, 194);
+}
+
+:host-context(.-theme-with-dark-background) .breakpoint-hit {
+    background-color: hsl(46, 98%, 22%);
+    color: #ccc;
+}