DevTools: Make labeled checkbox a web component

Source/devtools/front_end/ui/UIUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * 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:
  *
@@ skipping 1300 matching lines @@
  */
 function createRadioLabel(name, title, checked)
 {
     var element = createElement("label", "dt-radio");
     element.radioElement.name = name;
     element.radioElement.checked = !!checked;
     element.createTextChild(title);
     return element;
 }
 
+/**
+ * @param {string=} title
+ * @param {boolean=} checked
+ * @return {!Element}
+ */
+function createCheckboxLabel(title, checked)
+{
+    var element = createElement("label", "dt-checkbox");
+    element.checkboxElement.checked = !!checked;
+    if (title !== undefined) {
+        element.textElement = element.createChild("div", "dt-checkbox-text");
+        element.textElement.textContent = title;
+    }
+    return element;
+}
+
 ;(function() {
     registerCustomElement("button", "text-button", HTMLButtonElement, {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             this.type = "button";
             var root = this.createShadowRoot();
             root.appendChild(WebInspector.View.createStyleElement("ui/textButton.css"));
@@ skipping 23 matching lines @@
      * @suppressReceiverCheck
      * @this {Element}
      */
     function radioClickHandler(event)
     {
         if (this.radioElement.checked)
             return;
         this.radioElement.checked = true;
         this.radioElement.dispatchEvent(new Event("change"));
     }
+
+    registerCustomElement("label", "dt-checkbox", HTMLLabelElement, {
+        /**
+         * @this {Element}
+         */
+        createdCallback: function()
+        {
+            var root = this.createShadowRoot();
+            root.appendChild(WebInspector.View.createStyleElement("ui/checkboxTextLabel.css"));
+            this.checkboxElement = this.createChild("input", "dt-checkbox-button");
+            this.checkboxElement.type = "checkbox";
+            root.createChild("content").select = ".dt-checkbox-button";
+            root.createChild("content");
+        }
+    });
 })();