Adds Filter Exclusion Name character limit & related UI

src/htmlContent/edit-filter-dialog.html

@@ -7,6 +7,7 @@ <h1 class="dialog-title">{{Strings.FILE_FILTER_DIALOG}}</h1>
             {{{instruction}}}
             <textarea class="exclusions-editor"></textarea>
             <input type="text" class="exclusions-name" placeholder="{{Strings.FILTER_NAME_PLACEHOLDER}}">
+            <div class="exclusions-name-characters-remaining"></div>
             <div class="exclusions-filecount">{{Strings.FILTER_COUNTING_FILES}}</div>
         </div>
     </div>

src/nls/root/strings.js

@@ -210,6 +210,7 @@ define({
     "FILE_FILTER_DIALOG"                : "Edit Exclusion Set",
     "FILE_FILTER_INSTRUCTIONS"          : "Exclude files and folders matching any of the following strings / substrings or <a href='{0}' title='{0}'>wildcards</a>. Enter each string on a new line.",
     "FILTER_NAME_PLACEHOLDER"           : "Name this exclusion set (optional)",
+    "FILTER_NAME_REMAINING"             : "{0} characters remaining",
     "FILE_FILTER_CLIPPED_SUFFIX"        : "and {0} more",
     "FILTER_COUNTING_FILES"             : "Counting files\u2026",
     "FILTER_FILE_COUNT"                 : "Allows {0} of {1} files {2}",

src/search/FileFilters.js

@@ -45,6 +45,12 @@ define(function (require, exports, module) {
      */
     var FIRST_FILTER_INDEX = 3;
 
+    /**
+     * Constant: max number of characters for the filter name
+     * @type {number}
+     */
+    var FILTER_NAME_CHARACTER_MAX = 20;
+
     /**
      * Context Info on which files the filter will be applied to.
      * It will be initialized when createFilterPicker is called and if specified, editing UI will
@@ -323,7 +329,8 @@ define(function (require, exports, module) {
             };
         var dialog = Dialogs.showModalDialogUsingTemplate(Mustache.render(EditFilterTemplate, templateVars)),
             $nameField = dialog.getElement().find(".exclusions-name"),
-            $editField = dialog.getElement().find(".exclusions-editor");
+            $editField = dialog.getElement().find(".exclusions-editor"),
+            $remainingField = dialog.getElement().find(".exclusions-name-characters-remaining");
 
         $nameField.val(filter.name);
         $editField.val(filter.patterns.join("\n")).focus();
@@ -337,6 +344,28 @@ define(function (require, exports, module) {
             });
         }
 
+        $nameField.bind('input', function () {
+            var remainingCharacters = FILTER_NAME_CHARACTER_MAX - $(this).val().length;
+            if (remainingCharacters < 0.25*FILTER_NAME_CHARACTER_MAX) {
+                $remainingField.show();
+
+                $remainingField.text(StringUtils.format(
+                    Strings.FILTER_NAME_REMAINING,
+                    remainingCharacters
+                ));
+
+                if (remainingCharacters < 0) {
+                    $remainingField.addClass("exclusions-name-characters-limit-reached");
+                } else {
+                    $remainingField.removeClass("exclusions-name-characters-limit-reached");
+                }
+            }
+            else {
+                $remainingField.hide();
+            }
+            updatePrimaryButton();
+        });
+
         dialog.done(function (buttonId) {
             if (buttonId === Dialogs.DIALOG_BTN_OK) {
                 // Update saved filter preference
@@ -367,8 +396,9 @@ define(function (require, exports, module) {
 
         function updatePrimaryButton() {
             var trimmedValue = $editField.val().trim();
+            var exclusionNameLength = $nameField.val().length;
 
-            $primaryBtn.prop("disabled", !trimmedValue.length);
+            $primaryBtn.prop("disabled", !trimmedValue.length || (exclusionNameLength > FILTER_NAME_CHARACTER_MAX));
         }
 
         $editField.on("input", updatePrimaryButton);