Small tweak to about:profiler -- make the labels for checkboxes clickable (so...

Small tweak to about:profiler -- make the labels for checkboxes clickable (so you have a bigger target to click on than just the tiny checkbox).

Apparently if you surround an <input type=checkbox> within a <label> tag, the text will activate the checkbox.
Review URL: http://codereview.chromium.org/8601003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110995 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/profiler.html

@@ -103,8 +103,8 @@ table.results-table,
       <td colspan=2>
         <div>
           <b>Merge: </b><span id=column-merge-toggles-container></span>
-            <input type=checkbox id='merge-similar-threads-checkbox' checked/>
-            Merge similar threads.
+            <label><input type=checkbox id='merge-similar-threads-checkbox' checked/>
+               Merge similar threads.</label>
         </div>
         <div>
           <b>Show: </b><span id=column-toggles-container></span>

chrome/browser/resources/profiler.js

@@ -729,6 +729,18 @@ var MainView = (function() {
     return false;
   }
 
+  /**
+   * Adds a checkbox to |parent|. The checkbox will have a label on its right
+   * with text |label|. Returns the checkbox input node.
+   */
+  function addLabeledCheckbox(parent, label) {
+    var labelNode = addNode(parent, 'label');
+    var checkbox = addNode(labelNode, 'input');
+    checkbox.type = 'checkbox';
+    addText(labelNode, label);
+    return checkbox;
+  }
+
   /**
    * Return the last component in a path which is separated by either forward
    * slashes or backslashes.
@@ -1484,13 +1496,14 @@ var MainView = (function() {
     fillSelectionCheckboxes_: function(parent) {
       this.selectionCheckboxes_ = {};
 
+      var onChangeFunc = this.onSelectCheckboxChanged_.bind(this);
+
       for (var i = 0; i < ALL_TABLE_COLUMNS.length; ++i) {
         var key = ALL_TABLE_COLUMNS[i];
-        var checkbox = addNode(parent, 'input');
-        checkbox.type = 'checkbox';
-        checkbox.onchange = this.onSelectCheckboxChanged_.bind(this);
+        var checkbox = addLabeledCheckbox(parent, getNameForKey(key));
         checkbox.checked = true;
-        addNode(parent, 'span', getNameForKey(key) + ' ');
+        checkbox.onchange = onChangeFunc;
+        addText(parent, ' ');
         this.selectionCheckboxes_[key] = checkbox;
       }
 
@@ -1514,13 +1527,13 @@ var MainView = (function() {
     fillMergeCheckboxes_: function(parent) {
       this.mergeCheckboxes_ = {};
 
+      var onChangeFunc = this.onMergeCheckboxChanged_.bind(this);
+
       for (var i = 0; i < MERGEABLE_KEYS.length; ++i) {
         var key = MERGEABLE_KEYS[i];
-        var checkbox = addNode(parent, 'input');
-        checkbox.type = 'checkbox';
-        checkbox.onchange = this.onMergeCheckboxChanged_.bind(this);
-        checkbox.checked = false;
-        addNode(parent, 'span', getNameForKey(key) + ' ');
+        var checkbox = addLabeledCheckbox(parent, getNameForKey(key));
+        checkbox.onchange = onChangeFunc;
+        addText(parent, ' ');
         this.mergeCheckboxes_[key] = checkbox;
       }