DevTools: Make labeled checkbox a web component

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 215 matching lines @@
      * @param {string} type
      * @param {boolean} enabled
      */
     _createBreakpointElement: function(node, type, enabled)
     {
         var element = createElement("li");
         element._node = node;
         element._type = type;
         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 
-        var checkboxElement = createElement("input");
-        checkboxElement.className = "checkbox-elem";
-        checkboxElement.type = "checkbox";
-        checkboxElement.checked = enabled;
-        checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
-        element._checkboxElement = checkboxElement;
-        element.appendChild(checkboxElement);
+        var checkboxLabel = createCheckboxLabel(undefined, enabled);
+        checkboxLabel.className = "checkbox-elem";
+        checkboxLabel.checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
+        element._checkboxElement = checkboxLabel.checkboxElement;
+        element.appendChild(checkboxLabel);
 
-        var labelElement = createElement("span");
-        element.appendChild(labelElement);
 
         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
         linkifiedNode.classList.add("monospace");
-        labelElement.appendChild(linkifiedNode);
+
+        var textElement = checkboxLabel.createChild("span");
+        textElement.appendChild(linkifiedNode);
 
         var description = createElement("div");
         description.className = "source-text";
         description.textContent = this._breakpointTypeLabels[type];
-        labelElement.appendChild(description);
+        textElement.appendChild(description);
 
         var currentElement = this.listElement.firstChild;
         while (currentElement) {
             if (currentElement._type && currentElement._type < element._type)
                 break;
             currentElement = currentElement.nextSibling;
         }
         this.addListElement(element, currentElement);
         return element;
     },
@@ skipping 209 matching lines @@
             this.element.appendChild(this.bodyElement);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;