DevTools: Make labeled checkbox a web component

Source/devtools/front_end/sources/BreakpointsSidebarPane.js

 /*
  * Copyright (C) 2008 Apple 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:
  * 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
@@ skipping 78 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(uiLocation.linkText(), breakpoint.enabled());
+        element.appendChild(checkbox);
         checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpoint), false);
 
-        element.createTextChild(uiLocation.linkText());
-
-        var snippetElement = element.createChild("div", "source-text monospace");
+        var snippetElement = checkbox.textElement.createChild("div", "source-text monospace");
 
         /**
          * @param {?string} content
          */
         function didRequestContent(content)
         {
             var lineNumber = uiLocation.lineNumber
             var columnNumber = uiLocation.columnNumber;
             var contentString = new String(content);
             if (lineNumber < contentString.lineCount()) {
@@ skipping 245 matching lines @@
         if (enabled)
             this._updateBreakpointOnTarget(url, true, target);
 
         if (this._breakpointElements.has(url))
             return;
 
         var element = createElement("li");
         element._url = url;
         element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true);
 
-        var checkboxElement = element.createChild("input", "checkbox-elem");
-        checkboxElement.type = "checkbox";
-        checkboxElement.checked = enabled;
-        checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false);
-        element._checkboxElement = checkboxElement;
+        var label = createCheckboxLabel(undefined, enabled);
+        label.classList.add("checkbox-elem");
+        element.appendChild(label);
+        label.checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false);
+        element._checkboxElement = label.checkboxElement;
 
-        var labelElement = element.createChild("span", "cursor-auto");
+        var labelElement = label.createChild("span", "cursor-auto");
         if (!url)
             labelElement.textContent = WebInspector.UIString("Any XHR");
         else
             labelElement.textContent = WebInspector.UIString("URL contains \"%s\"", url);
         labelElement.addEventListener("dblclick", this._labelClicked.bind(this, url), false);
 
         var currentElement = /** @type {?Element} */ (this.listElement.firstChild);
         while (currentElement) {
             if (currentElement._url && currentElement._url < element._url)
                 break;
@@ skipping 233 matching lines @@
     targetRemoved: function(target) { },
 
     /**
      * @param {string} name
      * @param {!Array.<string>} eventNames
      * @param {boolean=} isInstrumentationEvent
      * @param {!Array.<string>=} targetNames
      */
     _createCategory: function(name, eventNames, isInstrumentationEvent, targetNames)
     {
-        var labelNode = createElement("label");
-        labelNode.textContent = name;
+        var labelNode = createCheckboxLabel(name);
 
         var categoryItem = {};
         categoryItem.element = new TreeElement(labelNode);
         this.categoriesTreeOutline.appendChild(categoryItem.element);
         categoryItem.element.listItemElement.classList.add("event-category");
         categoryItem.element.selectable = true;
 
-        categoryItem.checkbox = this._createCheckbox(labelNode);
+        categoryItem.checkbox = labelNode.checkboxElement;
         categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true);
 
         categoryItem.targetNames = this._stringArrayToLowerCase(targetNames || [WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny]);
         categoryItem.children = {};
         var category = (isInstrumentationEvent ? WebInspector.EventListenerBreakpointsSidebarPane.categoryInstrumentation :  WebInspector.EventListenerBreakpointsSidebarPane.categoryListener);
         for (var i = 0; i < eventNames.length; ++i) {
             var eventName = category + eventNames[i];
 
             var breakpointItem = {};
             var title = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName);
 
-            labelNode = createElement("label");
-            labelNode.textContent = title;
+            labelNode = createCheckboxLabel(title);
+            labelNode.classList.add("source-code");
 
             breakpointItem.element = new TreeElement(labelNode);
             categoryItem.element.appendChild(breakpointItem.element);
 
             breakpointItem.element.listItemElement.createChild("div", "breakpoint-hit-marker");
-            breakpointItem.element.listItemElement.classList.add("source-code");
             breakpointItem.element.selectable = false;
 
-            breakpointItem.checkbox = this._createCheckbox(labelNode);
+            breakpointItem.checkbox = labelNode.checkboxElement;
             breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, eventName, categoryItem.targetNames), true);
             breakpointItem.parent = categoryItem;
 
             categoryItem.children[eventName] = breakpointItem;
         }
         this._categoryItems.push(categoryItem);
     },
 
     /**
      * @param {!Array.<string>} array
      * @return {!Array.<string>}
      */
     _stringArrayToLowerCase: function(array)
     {
         return array.map(function(value) {
             return value.toLowerCase();
         });
     },
 
-    /**
-     * @param {!Element} labelNode
-     * @return {!Element}
-     */
-    _createCheckbox: function(labelNode)
-    {
-        var checkbox = createElementWithClass("input", "checkbox-elem");
-        checkbox.type = "checkbox";
-        labelNode.insertBefore(checkbox, labelNode.firstChild);
-        return checkbox;
-    },
-
     _categoryCheckboxClicked: function(categoryItem)
     {
         var checked = categoryItem.checkbox.checked;
         for (var eventName in categoryItem.children) {
             var breakpointItem = categoryItem.children[eventName];
             if (breakpointItem.checkbox.checked === checked)
                 continue;
             if (checked)
                 this._setBreakpoint(eventName, categoryItem.targetNames);
             else
@@ skipping 169 matching lines @@
         var breakpoints = WebInspector.settings.eventListenerBreakpoints.get();
         for (var i = 0; i < breakpoints.length; ++i) {
             var breakpoint = breakpoints[i];
             if (breakpoint && typeof breakpoint.eventName === "string")
                 this._setBreakpoint(breakpoint.eventName, breakpoint.targetNames, target);
         }
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }