DevTools: migrate sidebar pane's titleElement to use Toolbar.

Source/devtools/front_end/sources/JavaScriptBreakpointsSidebarPane.js

 // Copyright (c) 2015 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.
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  * @param {!WebInspector.BreakpointManager} breakpointManager
  * @param {function(!WebInspector.UISourceCode, number=, number=, boolean=)} showSourceLineDelegate
  */
 WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, showSourceLineDelegate)
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
     this.registerRequiredCSS("components/breakpointsList.css");
 
     this._breakpointManager = breakpointManager;
     this._showSourceLineDelegate = showSourceLineDelegate;
 
     this.listElement = createElementWithClass("ol", "breakpoint-list");
 
-    this.emptyElement = this.bodyElement.createChild("div", "info");
+    this.emptyElement = this.element.createChild("div", "info");
     this.emptyElement.textContent = WebInspector.UIString("No Breakpoints");
 
     this._items = new Map();
 
     var breakpointLocations = this._breakpointManager.allBreakpointLocations();
     for (var i = 0; i < breakpointLocations.length; ++i)
         this._addBreakpoint(breakpointLocations[i].breakpoint, breakpointLocations[i].uiLocation);
 
     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
@@ skipping 36 matching lines @@
     /**
      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
      * @param {!WebInspector.UILocation} uiLocation
      */
     _addBreakpoint: function(breakpoint, uiLocation)
     {
         var element = createElementWithClass("li", "cursor-pointer");
         element.addEventListener("contextmenu", this._breakpointContextMenu.bind(this, breakpoint), true);
         element.addEventListener("click", this._breakpointClicked.bind(this, uiLocation), false);
 
-        var checkbox = element.createChild("input", "checkbox-elem");
-        checkbox.type = "checkbox";
-        checkbox.checked = breakpoint.enabled();
+        var checkbox = createCheckboxLabel("", breakpoint.enabled());
+        element.appendChild(checkbox);
         checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpoint), false);
 
         element.createTextChild(uiLocation.linkText());

[dgozman, 2015/06/09 13:27:02]

Make this checkbox title instead of "".

[pfeldman, 2015/06/09 13:40:59]

Done.

 
         var snippetElement = element.createChild("div", "source-text monospace");
 
         /**
          * @param {?string} content
          */
         function didRequestContent(content)
         {
             var lineNumber = uiLocation.lineNumber
             var columnNumber = uiLocation.columnNumber;
@@ skipping 111 matching lines @@
 
         contextMenu.show();
     },
 
     _addListElement: function(element, beforeElement)
     {
         if (beforeElement)
             this.listElement.insertBefore(element, beforeElement);
         else {
             if (!this.listElement.firstChild) {
-                this.bodyElement.removeChild(this.emptyElement);
-                this.bodyElement.appendChild(this.listElement);
+                this.element.removeChild(this.emptyElement);
+                this.element.appendChild(this.listElement);
             }
             this.listElement.appendChild(element);
         }
     },
 
     _removeListElement: function(element)
     {
         this.listElement.removeChild(element);
         if (!this.listElement.firstChild) {
-            this.bodyElement.removeChild(this.listElement);
-            this.bodyElement.appendChild(this.emptyElement);
+            this.element.removeChild(this.listElement);
+            this.element.appendChild(this.emptyElement);
         }
     },
 
     _compare: function(x, y)
     {
         if (x !== y)
             return x < y ? -1 : 1;
         return 0;
     },
 
     _compareBreakpoints: function(b1, b2)
     {
         return this._compare(b1.uiSourceCode.originURL(), b2.uiSourceCode.originURL()) || this._compare(b1.lineNumber, b2.lineNumber);
     },
 
     reset: function()
     {
         this.listElement.removeChildren();
         if (this.listElement.parentElement) {
-            this.bodyElement.removeChild(this.listElement);
-            this.bodyElement.appendChild(this.emptyElement);
+            this.element.removeChild(this.listElement);
+            this.element.appendChild(this.emptyElement);
         }
         this._items.clear();
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }