Implement multiple file exclusion sets

src/htmlContent/edit-filter-dialog.html

@@ -0,0 +1,17 @@
+<div class="file-filter-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{Strings.FILE_FILTER_DIALOG}}</h1>
+    </div>
+    <div class="modal-body">
+        <div class="dialog-message">
+            {{{instruction}}}
+            <textarea class="exclusions-editor"></textarea>
+            <input type="text" class="exclusions-name" placeholder="{{Strings.FILTER_NAME_PLACEHOLDER}}">
+            <div class="exclusions-filecount">{{Strings.FILTER_COUNTING_FILES}}</div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="dialog-button btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
+        <button class="dialog-button btn primary" data-button-id="ok">{{Strings.OK}}</button>
+    </div>
+</div>

src/htmlContent/filter-name.html

@@ -0,0 +1,4 @@
+<div class='filter-trash-icon'>&times;</div><!-- 
+--><span class='recent-filter-name'>{{{filter-name}}}</span><!-- 
+--><span class='recent-filter-patterns'>{{{filter-patterns}}}</span><!-- 
+--><span class='filter-edit-icon'></span>

src/nls/root/strings.js

@@ -174,11 +174,14 @@ define({
     "ERROR_FETCHING_UPDATE_INFO_MSG"    : "There was a problem getting the latest update information from the server. Please make sure you are connected to the internet and try again.",
 
     // File exclusion filters
-    "NO_FILE_FILTER"                    : "Exclude files\u2026",
+    "NEW_FILE_FILTER"                   : "New Exclusion Set\u2026",
+    "CLEAR_FILE_FILTER"                 : "Don't Exclude Files",
+    "NO_FILE_FILTER"                    : "No Files Excluded",
+    "EXCLUDE_FILE_FILTER"               : "Exclude {0}",
     "EDIT_FILE_FILTER"                  : "Edit\u2026",
-    "FILE_FILTER_DIALOG"                : "Edit Filter",
+    "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.",
-    "FILE_FILTER_LIST_PREFIX"           : "except",
+    "FILTER_NAME_PLACEHOLDER"           : "Name this exclusion set (optional)",
     "FILE_FILTER_CLIPPED_SUFFIX"        : "and {0} more",
     "FILTER_COUNTING_FILES"             : "Counting files\u2026",
     "FILTER_FILE_COUNT"                 : "Allows {0} of {1} files {2}",

src/search/FindInFiles.js

@@ -954,10 +954,12 @@ define(function (require, exports, module) {
         $(this.modalBar).on("close", this._handleClose.bind(this));
 
         // Custom closing behavior: if in the middle of executing search, blur shouldn't close ModalBar yet. And
-        // don't close bar when opening Edit Filter dialog either.
+        // don't close bar when opening Edit Filter dialog or showing the filter dropdown list either.
         var self = this;
         this.modalBar.isLockedOpen = function () {
-            return self.getDialogTextField().attr("disabled") || $(".modal.instance .exclusions-editor").length > 0;
+            return self.getDialogTextField().attr("disabled") ||
+                    $(".modal.instance .exclusions-editor").length > 0 ||
+                    $("ul.dropdown-menu.dropdownbutton-popup").length > 0;
         };
 
         var $searchField = $("input#find-what"),

src/styles/brackets.less

@@ -1199,27 +1199,78 @@ a, img {
 }
 
 // File exclusion filter (used only in Find in Files search bar, for now)
-.filter-picker {
-    display: inline-block;
-    margin-left: 8px;
-    button {
-        margin-left: 8px;
-    }
+.filter-trash-icon {
+    position: absolute;
+    left: 7px;
+    width: 16px;
+    height: 16px;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 15px;
+    text-align: center;
+    visibility: hidden;
+}
+
+.filter-trash-icon:hover {
+    color: rgba(0, 0, 0, 1);
+}
+
+.filter-edit-icon {
+    float: right;
+    width: 13px;
+    height: 13px;
+    background-image: url("images/edit-icon.svg");
+    background-repeat: no-repeat;
+    opacity: 0.5;
+    visibility: hidden;
+    position: relative;
+    top: 2px;
+    right: -4px;
+}
+
+.filter-edit-icon:hover {
+    opacity: 1;
+}
+
+li:hover .filter-trash-icon,
+li:hover .filter-edit-icon {
+    visibility: visible;
+}
+
+.recent-filter-name {
+    margin-left: 12px;
+}
+
+.recent-filter-patterns {
+    color: @tc-light-weight-quiet-text;
+    padding-right: 52px;
+}
+
+button.file-filter-picker {
+    margin-left: 10px;
 }
 
 // File exclusion filter editor dialog
-textarea.exclusions-editor {
+input.exclusions-name {
     display: block;
     width: 100%;
-    height: 160px;
+    height: 30px;
     box-sizing: border-box; // needed for width: 100% since it has padding
     margin-top: 12px;
     margin-bottom: 0;
+}
+textarea.exclusions-editor {
+    display: block;
+    width: 100%;
+    height: 120px;
+    box-sizing: border-box; // needed for width: 100% since it has padding
+    margin-top: 5px;
+    margin-bottom: 0;
     .code-font();
 }
 .exclusions-filecount {
-    margin: 12px 0 -20px 0;
-    padding: 4px 6px;
+    margin: 12px 0 -14px 0;
+    padding: 4px 8px;
     background-color: @tc-highlight;
     border-radius: @tc-control-border-radius;
 }

src/styles/brackets_patterns_override.less

@@ -464,7 +464,7 @@ a:focus {
     &.dropdown-menu {
         border: none;
         border-radius: @tc-control-border-radius;
-        padding: 0;
+        padding: 5px 0;
         position: absolute;
         display: block;
         box-shadow: @tc-dropdown-shadow;
@@ -477,6 +477,7 @@ a:focus {
 
     &.dropdown-menu li a {
         padding: 1px 15px 1px 15px;
+        color: @bc-black;
     }
 
     &.dropdown-menu .stylesheet-link {
@@ -488,8 +489,33 @@ a:focus {
         color: @bc-black !important;
     }
 
+    &.dropdown-menu a {
+        &::before {
+            position: absolute;
+            left: 10px;
+            text-align: center;
+            content: "✓";
+            display: none;
+        }
+        /* toggle checkmark visibility */
+        &.checked::before {
+            display: inline-block;
+        }
+    }
+
+    &.dropdown-menu a:hover {
+        /* toggle checkmark visibility */
+        &.checked::before {
+            display: none;
+        }
+    }
+
     &.dropdown-menu a:not(.selected):hover {
-         background: none;
+        background: none;
+    }
+
+    .divider {
+        margin: 5px 1px;
     }
 }
 

src/utils/DropdownEventHandler.js

@@ -184,7 +184,12 @@ define(function (require, exports, module) {
             }
         }
 
-        this._setSelectedIndex(pos, true);
+        // If the item to be selected is a divider, then rotate one more.
+        if ($(this.$items[pos]).hasClass("divider")) {
+            this._rotateSelection((distance > 0) ? (distance + 1) : (distance - 1));
+        } else {
+            this._setSelectedIndex(pos, true);
+        }
     };
 
     /**

src/widgets/DropdownButton.js

@@ -112,13 +112,58 @@ define(function (require, exports, module) {
     DropdownButton.prototype._renderList = function () {
         var html = "";
         this.items.forEach(function (item, i) {
-            html += "<li><a class='stylesheet-link' data-index='" + i + "'>";
-            html += this.itemRenderer(item, i);
-            html += "</a></li>";
+            if (item === "---") {
+                html += "<li class='divider'></li>";
+            } else {
+                html += "<li><a class='stylesheet-link' data-index='" + i + "'>";
+                html += this.itemRenderer(item, i);
+                html += "</a></li>";
+            }
         }.bind(this));
         return html;
     };
 
+    /**
+     * Refresh the dropdown list by removing and re-creating all list items.
+     * Call this after deleting/adding any item in the dropdown list.
+     */
+    DropdownButton.prototype.refresh = function () {
+        if (!this.$dropdown) {
+            return;
+        }
+
+        // Remove all list items and then re-create them from this.items.
+        $("li", this.$dropdown).remove();
+        this.$dropdown.append(this._renderList());
+
+        // Also trigger openDropdown handler so that custom event handlers can be
+        // set up for any custom UI in the list.
+        $(this).triggerHandler("openDropdown", [this.$dropdown]);
+    };
+
+    /**
+     * Check/Uncheck the list item of the given index.
+     * @param {number} index The index of the list item to be checked or unchecked
+     * @param {boolean} checked True if the list item is to be checked, false to get check
+     *    mark removed.
+     */
+    DropdownButton.prototype.setChecked = function (index, checked) {
+        if (!this.$dropdown) {
+            return;
+        }
+
+        var listItems = $("li", this.$dropdown),
+            count     = listItems.length;
+
+        if (index > -1 && index < count) {
+            if (checked) {
+                $("a", listItems[index]).addClass("checked");
+            } else if ($(listItems[index]).hasClass("checked")) {
+                $("a", listItems[index]).removeClass("checked");
+            }
+        }
+    };
+
     /** Pops open the dropdown if currently closed. Does nothing if items.length == 0 */
     DropdownButton.prototype.showDropdown = function () {
         // Act like a plain old button if no items to show
@@ -178,6 +223,8 @@ define(function (require, exports, module) {
         $dropdown.focus();
 
         this.$dropdown = $dropdown;
+
+        $(this).triggerHandler("openDropdown", [$dropdown]);
     };
 
     /**
@@ -188,12 +235,12 @@ define(function (require, exports, module) {
     DropdownButton.prototype._onDropdownClose = function () {
         window.document.body.removeEventListener("click", this._onClickOutside, true);
         $(PanelManager).off("editorAreaResize", this.closeDropdown);
-
+        
         // Restore focus to old pos, unless "select" handler changed it
         if (window.document.activeElement === this.$dropdown[0]) {
             this._lastFocus.focus();
         }
-        
+
         this._dropdownEventHandler = null;
         this.$dropdown = null;  // already remvoed from DOM automatically by PopUpManager
     };
@@ -209,8 +256,9 @@ define(function (require, exports, module) {
     DropdownButton.prototype._onClickOutside = function (event) {
         var $container = $(event.target).closest(".dropdownbutton-popup");
 
-        // If click is outside dropdown list, then close dropdown list
-        if ($container.length === 0 || $container[0] !== this.$dropdown[0]) {
+        // If click is outside dropdown list or dropdown button, then close dropdown list
+        if (!$(event.target).hasClass("btn btn-dropdown") &&
+                ($container.length === 0 || $container[0] !== this.$dropdown[0])) {
             this.closeDropdown();
         }
     };