DevTools: Make labeled checkbox a web component

Source/devtools/front_end/settings/SettingsScreen.js

Index: Source/devtools/front_end/settings/SettingsScreen.js
diff --git a/Source/devtools/front_end/settings/SettingsScreen.js b/Source/devtools/front_end/settings/SettingsScreen.js
index 87a55770492fb1a2643714deec8e844105e1e2b2..ed1cde21d8a92eaea4beb0da1626fe8cd5d863a4 100644
--- a/Source/devtools/front_end/settings/SettingsScreen.js
+++ b/Source/devtools/front_end/settings/SettingsScreen.js
@@ -588,10 +588,9 @@ WebInspector.ExperimentsSettingsTab.prototype = {
 
     _createExperimentCheckbox: function(experiment)
     {
-        var input = createElement("input");
-        input.type = "checkbox";
+        var label = createCheckboxLabel(WebInspector.UIString(experiment.title), experiment.isEnabled());
+        var input = label.checkboxElement;
         input.name = experiment.name;
-        input.checked = experiment.isEnabled();
         function listener()
         {
             experiment.setEnabled(input.checked);
@@ -600,9 +599,6 @@ WebInspector.ExperimentsSettingsTab.prototype = {
 
         var p = createElement("p");
         p.className = experiment.hidden && !experiment.isEnabled() ? "settings-experiment-hidden" : "";
-        var label = p.createChild("label");
-        label.appendChild(input);
-        label.createTextChild(WebInspector.UIString(experiment.title));
         p.appendChild(label);
         return p;
     },