Implement multiple file exclusion sets

src/nls/root/strings.js

@@ -174,11 +174,13 @@ 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",
     "FILE_FILTER_CLIPPED_SUFFIX"        : "and {0} more",
     "FILTER_COUNTING_FILES"             : "Counting files\u2026",
     "FILTER_FILE_COUNT"                 : "Allows {0} of {1} files {2}",

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 {
@@ -491,6 +492,10 @@ a:focus {
     &.dropdown-menu a:not(.selected):hover {
          background: none;
     }
+
+    .divider {
+        margin: 5px 1px;
+    }
 }
 
 /* Inline editor stylesheet-picker DropdownButton */

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 : --distance);
+        } else {
+            this._setSelectedIndex(pos, true);
+        }
     };
 
     /**

src/widgets/DropdownButton.js

@@ -112,9 +112,13 @@ 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;
     };
@@ -178,6 +182,8 @@ define(function (require, exports, module) {
         $dropdown.focus();
 
         this.$dropdown = $dropdown;
+
+        $(this).triggerHandler("openDropdown", [$dropdown]);
     };
 
     /**