add badge to each menu item

this is a possible way to address #7628

IPython/html/static/tree/js/notebooklist.js

@@ -499,12 +499,17 @@ define([
             if (selected_nums[i] === 0) {
                 $('#'+checkbox_ids[i])[0].indeterminate = false;
                 $('#'+checkbox_ids[i]).prop('checked', false);
-            } else if (selected_nums[i] === total_nums[i]) {
-                $('#'+checkbox_ids[i])[0].indeterminate = false;
-                $('#'+checkbox_ids[i]).prop('checked', true);
+                $('#badge-'+checkbox_ids[i]).text('');
             } else {
-                $('#'+checkbox_ids[i]).prop('checked', false);
-                $('#'+checkbox_ids[i])[0].indeterminate = true;
+                // Update badge
+                $('#badge-'+checkbox_ids[i]).text(selected_nums[i]);
+                if (selected_nums[i] === total_nums[i]) {
+                    $('#'+checkbox_ids[i])[0].indeterminate = false;
+                    $('#'+checkbox_ids[i]).prop('checked', true);
+                } else {
+                    $('#'+checkbox_ids[i]).prop('checked', false);
+                    $('#'+checkbox_ids[i])[0].indeterminate = true;
+                }
             }
         }
     };

IPython/html/templates/tree.html

@@ -88,6 +88,7 @@ data-terminals-available="{{terminals_available}}"
                     <label for="select-folders">
                       <i class="item_icon folder_icon icon-fixed-width"></i>
                       Folders
+                      <span class="badge" id="badge-select-folders"></span>
                     </label>
                   </li>
                   <li role="presentation">
@@ -95,6 +96,7 @@ data-terminals-available="{{terminals_available}}"
                     <label for="select-notebooks">
                       <i class="item_icon notebook_icon icon-fixed-width"></i>
                       All Notebooks
+                      <span class="badge" id="badge-select-notebooks"></span>
                     </label>
                   </li>
                   <li role="presentation">
@@ -102,6 +104,7 @@ data-terminals-available="{{terminals_available}}"
                     <label for="select-running-notebooks">
                       <i class="item_icon running_notebook_icon icon-fixed-width"></i>
                       Running
+                      <span class="badge" id="badge-select-running-notebooks"></span>
                     </label>
                   </li>
                   <li role="presentation">
@@ -109,6 +112,7 @@ data-terminals-available="{{terminals_available}}"
                     <label for="select-files">
                       <i class="item_icon file_icon icon-fixed-width"></i>
                       Files
+                      <span class="badge" id="badge-select-files"></span>
                     </label>
                   </li>
                 </ul>