DevTools: Make labeled checkbox a web component

Source/devtools/front_end/ui/StatusBar.js

 /*
  * Copyright (C) 2009 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 737 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.StatusBarItem}
  * @param {string} text
  * @param {string=} title
  * @param {!WebInspector.Setting=} setting
  */
 WebInspector.StatusBarCheckbox = function(text, title, setting)
 {
-    WebInspector.StatusBarItem.call(this, createElementWithClass("label", "checkbox"));
-    this.inputElement = this.element.createChild("input");
-    this.inputElement.type = "checkbox";
-    this.element.createTextChild(text);
+    WebInspector.StatusBarItem.call(this, createCheckboxLabel(text));
+    this.element.classList.add("checkbox");
+    this.inputElement = this.element.checkboxElement;
     if (title)
         this.element.title = title;
     if (setting)
         WebInspector.SettingsUI.bindCheckbox(this.inputElement, setting);
 }
 
 WebInspector.StatusBarCheckbox.prototype = {
     /**
      * @return {boolean}
      */
@@ skipping 107 matching lines @@
  * @param {!Element} element
  */
 WebInspector.StatusBarItemWrapper = function(element)
 {
     WebInspector.StatusBarItem.call(this, element, true);
 }
 
 WebInspector.StatusBarItemWrapper.prototype = {
     __proto__: WebInspector.StatusBarItem.prototype
 }