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/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

@@ -31,8 +31,12 @@
  *  - The button's label is not automatically changed when an item in the list is clicked
  *  - Its width is not the max of all the dropdown items' labels
  *  - The button & dropdown's appearance can be customized far more
+ * Events
+ *  - listRendered -- This event is dispatched after the entire list is rendered so that custom event handlers can be
+ *                    set up for any custom UI in the list.
  * 
  * TODO: merge DropdownEventHandler into this? Are there any other widgets that might want to use it separately?
+ *
  */
 define(function (require, exports, module) {
     "use strict";
@@ -98,6 +102,17 @@ define(function (require, exports, module) {
         event.stopPropagation();
     };
 
+    /**
+     * Update the button label.
+     * @param {string} label 
+     */
+    DropdownButton.prototype.setButtonLabel = function (label) {
+        if (!this.$button) {
+            return;
+        }
+        $(this.$button).text(label);
+    };
+
     /**
      * Called for each item when rendering the dropdown.
      * @param {*} item from items array
@@ -108,17 +123,69 @@ define(function (require, exports, module) {
         return _.escape(String(item));
     };
 
-    /** Converts the list of item objects into HTML list items in format required by DropdownEventHandler */
-    DropdownButton.prototype._renderList = function () {
+    /**
+     * Converts the list of item objects into HTML list items in format required by DropdownEventHandler
+     * @param {!jQueryObject} parent The dropdown element
+     * @return {!jQueryObject} The dropdown element with the rendered list items appended.
+     */
+    DropdownButton.prototype._renderList = function (parent) {
+        if (!parent) {
+            return null;
+        }
+
         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;
+
+        parent.append(html);
+
+        // Also trigger listRendered handler so that custom event handlers can be
+        // set up for any custom UI in the list.
+        $(this).triggerHandler("listRendered", [parent]);
+
+        return parent;
     };
 
+    /**
+     * 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._renderList(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) {
+            $("a", listItems[index]).toggleClass("checked", 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
@@ -133,20 +200,22 @@ define(function (require, exports, module) {
         Menus.closeAll();
 
         var $dropdown = $("<ul class='dropdown-menu dropdownbutton-popup' tabindex='-1'>")
-            .addClass(this.dropdownExtraClasses)  // (no-op if unspecified)
-            .append(this._renderList())
+            .addClass(this.dropdownExtraClasses);  // (no-op if unspecified)
+
+        this.$dropdown = $dropdown;
+        this._renderList(this.$dropdown)
             .appendTo($("body"))
             .data("attached-to", this.$button[0]);  // keep ModalBar open while dropdown focused
 
         // Calculate position of dropdown
-        var toggleOffset   = this.$button.offset(),
-            posLeft        = toggleOffset.left,
-            posTop         = toggleOffset.top + this.$button.outerHeight(),
-            elementRect = {
-                top:    posTop,
-                left:   posLeft,
-                height: $dropdown.height(),
-                width:  $dropdown.width()
+        var toggleOffset = this.$button.offset(),
+            posLeft      = toggleOffset.left,
+            posTop       = toggleOffset.top + this.$button.outerHeight(),
+            elementRect  = {
+                top:     posTop,
+                left:    posLeft,
+                height:  $dropdown.height(),
+                width:   $dropdown.width()
             },
             clip = ViewUtils.getElementClipSize($(window), elementRect);
 
@@ -170,14 +239,12 @@ define(function (require, exports, module) {
         this._dropdownEventHandler = new DropdownEventHandler($dropdown, this._onSelect.bind(this), this._onDropdownClose.bind(this));
         this._dropdownEventHandler.open();
 
-        window.document.body.addEventListener("click", this._onClickOutside, true);
+        window.document.body.addEventListener("mousedown", this._onClickOutside, true);
         $(PanelManager).on("editorAreaResize", this.closeDropdown);
 
         // Manage focus
         this._lastFocus = window.document.activeElement;
         $dropdown.focus();
-
-        this.$dropdown = $dropdown;
     };
 
     /**
@@ -186,14 +253,14 @@ define(function (require, exports, module) {
      * was closed.
      */
     DropdownButton.prototype._onDropdownClose = function () {
-        window.document.body.removeEventListener("click", this._onClickOutside, true);
+        window.document.body.removeEventListener("mousedown", 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,9 +276,12 @@ 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).is(this.$button) &&
+                ($container.length === 0 || $container[0] !== this.$dropdown[0])) {
             this.closeDropdown();
+            event.stopPropagation();
+            event.preventDefault();
         }
     };