DevTools: Make labeled checkbox a web component

Source/devtools/front_end/ui/SettingsUI.js

Index: Source/devtools/front_end/ui/SettingsUI.js
diff --git a/Source/devtools/front_end/ui/SettingsUI.js b/Source/devtools/front_end/ui/SettingsUI.js
index bb8b49bd9b5014ae704ed4a645fc05ab8cabcd7d..4892e1470b0c9660a0852f8eaf3c96e789afabc3 100644
--- a/Source/devtools/front_end/ui/SettingsUI.js
+++ b/Source/devtools/front_end/ui/SettingsUI.js
@@ -34,23 +34,19 @@ WebInspector.SettingsUI = {}
  * @param {string} name
  * @param {!WebInspector.Setting} setting
  * @param {boolean=} omitParagraphElement
- * @param {!Element=} inputElement
  * @param {string=} tooltip
  * @return {!Element}
  */
-WebInspector.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphElement, inputElement, tooltip)
+WebInspector.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphElement, tooltip)
 {
-    var input = inputElement || createElement("input");
-    input.type = "checkbox";
-    input.name = name;
-    WebInspector.SettingsUI.bindCheckbox(input, setting);
-
-    var label = createElement("label");
-    label.appendChild(input);
-    label.createTextChild(name);
+    var label = createCheckboxLabel(name);
     if (tooltip)
         label.title = tooltip;
 
+    var input = label.checkboxElement;
+    input.name = name;
+    WebInspector.SettingsUI.bindCheckbox(input, setting);
+
     if (omitParagraphElement)
         return label;