DevTools: Make labeled checkbox a web component

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.
@@ skipping 931 matching lines @@
         }
 
         /**
          * @param {string} state
          * @return {!Element}
          * @this {WebInspector.StylesSidebarPane}
          */
         function createCheckbox(state)
         {
             var td = createElement("td");
-            var label = createElement("label");
-            var input = createElement("input");
-            input.type = "checkbox";
+            var label = createCheckboxLabel(":" + state);
+            var input = label.checkboxElement;
             input.state = state;
             input.addEventListener("click", clickListener.bind(this), false);
             inputs.push(input);
-            label.appendChild(input);
-            label.createTextChild(":" + state);
             td.appendChild(label);
             return td;
         }
 
         var tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "active"));
         tr.appendChild(createCheckbox.call(this, "hover"));
 
         tr = table.createChild("tr");
         tr.appendChild(createCheckbox.call(this, "focus"));
@@ skipping 2726 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }