DevTools: Make labeled checkbox a web component

Source/devtools/front_end/audits/AuditLauncherView.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 89 matching lines @@
     /**
      * @param {!WebInspector.AuditCategory} category
      */
     addCategory: function(category)
     {
         if (!this._sortedCategories.length)
             this._createLauncherUI();
 
         var selectedCategories = this._selectedCategoriesSetting.get();
         var categoryElement = this._createCategoryElement(category.displayName, category.id);
-        category._checkboxElement = categoryElement.firstChild;
+        category._checkboxElement = categoryElement.checkboxElement;
         if (this._selectAllCheckboxElement.checked || selectedCategories[category.displayName]) {
             category._checkboxElement.checked = true;
             ++this._currentCategoriesCount;
         }
 
         /**
          * @param {!WebInspector.AuditCategory} a
          * @param {!WebInspector.AuditCategory} b
          * @return {number}
          */
@@ skipping 93 matching lines @@
 
     _categoryClicked: function(event)
     {
         this._currentCategoriesCount += event.target.checked ? 1 : -1;
         this._selectAllCheckboxElement.checked = this._currentCategoriesCount === this._sortedCategories.length;
         this._selectedCategoriesUpdated(true);
     },
 
     /**
      * @param {string} title
-     * @param {string} id
+     * @param {string=} id
      */
     _createCategoryElement: function(title, id)
     {
-        var labelElement = createElement("label");
-        labelElement.id = this._categoryIdPrefix + id;
-
-        var element = createElement("input");
-        element.type = "checkbox";
-        if (id !== "")
-            element.addEventListener("click", this._boundCategoryClickListener, false);
-        labelElement.appendChild(element);
-        labelElement.createTextChild(title);
+        var labelElement = createCheckboxLabel(title);
+        if (id) {
+            labelElement.id = this._categoryIdPrefix + id;
+            labelElement.checkboxElement.addEventListener("click", this._boundCategoryClickListener, false);
+        }
         labelElement.__displayName = title;
 
         return labelElement;
     },
 
     _createLauncherUI: function()
     {
         this._headerElement = createElement("h1");
         this._headerElement.textContent = WebInspector.UIString("Select audits to run");
 
         for (var child = 0; child < this._contentElement.children.length; ++child)
             this._contentElement.removeChild(this._contentElement.children[child]);
 
         this._contentElement.appendChild(this._headerElement);
 
         /**
          * @param {!Event} event
          * @this {WebInspector.AuditLauncherView}
          */
         function handleSelectAllClick(event)
         {
             this._selectAllClicked(event.target.checked, true);
         }
         var categoryElement = this._createCategoryElement(WebInspector.UIString("Select All"), "");
         categoryElement.id = "audit-launcher-selectall";
-        this._selectAllCheckboxElement = categoryElement.firstChild;
+        this._selectAllCheckboxElement = categoryElement.checkboxElement;
         this._selectAllCheckboxElement.checked = this._selectedCategoriesSetting.get()[WebInspector.AuditLauncherView.AllCategoriesKey];
         this._selectAllCheckboxElement.addEventListener("click", handleSelectAllClick.bind(this), false);
         this._contentElement.appendChild(categoryElement);
 
         this._categoriesElement = this._contentElement.createChild("fieldset", "audit-categories-container");
         this._currentCategoriesCount = 0;
 
         this._contentElement.createChild("div", "flexible-space");
 
         this._buttonContainerElement = this._contentElement.createChild("div", "button-container");
@@ skipping 39 matching lines @@
     },
 
     _updateButton: function()
     {
         this._launchButton.textContent = this._auditRunning ? WebInspector.UIString("Stop") : WebInspector.UIString("Run");
         this._launchButton.disabled = !this._currentCategoriesCount;
     },
 
     __proto__: WebInspector.VBox.prototype
 }