From 2801cbed7243b2d66ac091c986b549cd0addfe91 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Mon, 25 Nov 2013 21:58:56 +0100
Subject: [PATCH 1/8] Improve working-set context menu UI/UX

This commit refers to issue #6012
It rearrange items whitin the working sets and move all those related
to "sorting" to a new drop down menu accessible through a new cog
button in the working set header
---
 src/command/DefaultMenus.js               | 36 +++++++++++++++++++----
 src/command/Menus.js                      | 15 +++++++---
 src/htmlContent/main-view.html            |  4 ++-
 src/styles/brackets.less                  | 19 ++++++++++++
 src/styles/images/topcoat-settings-16.svg |  8 +++++
 5 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/images/topcoat-settings-16.svg

diff --git a/src/command/DefaultMenus.js b/src/command/DefaultMenus.js
index 8b8b6517bfc..60e5fa25e8d 100644
--- a/src/command/DefaultMenus.js
+++ b/src/command/DefaultMenus.js
@@ -195,7 +195,6 @@ define(function (require, exports, module) {
         project_cmenu.addMenuItem(Commands.FILE_REFRESH);
 
         var working_set_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.WORKING_SET_MENU);
-        working_set_cmenu.addMenuItem(Commands.FILE_CLOSE);
         working_set_cmenu.addMenuItem(Commands.FILE_SAVE);
         working_set_cmenu.addMenuItem(Commands.FILE_SAVE_AS);
         working_set_cmenu.addMenuItem(Commands.FILE_RENAME);
@@ -204,11 +203,15 @@ define(function (require, exports, module) {
         working_set_cmenu.addMenuDivider();
         working_set_cmenu.addMenuItem(Commands.EDIT_FIND_IN_SUBTREE);
         working_set_cmenu.addMenuDivider();
-        working_set_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_ADDED);
-        working_set_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_NAME);
-        working_set_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_TYPE);
-        working_set_cmenu.addMenuDivider();
-        working_set_cmenu.addMenuItem(Commands.SORT_WORKINGSET_AUTO);
+        working_set_cmenu.addMenuItem(Commands.FILE_CLOSE);
+        
+        
+        var working_set_settings_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.WORKING_SET_SETTINGS_MENU);
+        working_set_settings_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_ADDED);
+        working_set_settings_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_NAME);
+        working_set_settings_cmenu.addMenuItem(Commands.SORT_WORKINGSET_BY_TYPE);
+        working_set_settings_cmenu.addMenuDivider();
+        working_set_settings_cmenu.addMenuItem(Commands.SORT_WORKINGSET_AUTO);
 
         var editor_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.EDITOR_MENU);
         // editor_cmenu.addMenuItem(Commands.NAVIGATE_JUMPTO_DEFINITION);
@@ -274,6 +277,27 @@ define(function (require, exports, module) {
             working_set_cmenu.open(e);
         });
 
+        /**
+         * Dropdown menu for workspace sorting
+         */
+        $("#working-set-option-btn").on("click", function (e) {
+            var buttonOffset,
+                buttonHeight;
+            
+            e.stopPropagation();
+            
+            if (working_set_settings_cmenu.isOpen()) {
+                working_set_settings_cmenu.close();    
+            } else {
+                buttonOffset = $(this).offset();
+                buttonHeight = $(this).outerHeight();
+                working_set_settings_cmenu.open({
+                    pageX: buttonOffset.left,
+                    pageY: buttonOffset.top + buttonHeight
+                });
+            }
+        });
+        
         // Prevent the browser context menu since Brackets creates a custom context menu
         $(window).contextmenu(function (e) {
             e.preventDefault();
diff --git a/src/command/Menus.js b/src/command/Menus.js
index e01b1666014..874acd4c2ae 100644
--- a/src/command/Menus.js
+++ b/src/command/Menus.js
@@ -56,10 +56,11 @@ define(function (require, exports, module) {
      * @enum {string}
      */
     var ContextMenuIds = {
-        EDITOR_MENU:        "editor-context-menu",
-        INLINE_EDITOR_MENU: "inline-editor-context-menu",
-        PROJECT_MENU:       "project-context-menu",
-        WORKING_SET_MENU:   "working-set-context-menu"
+        EDITOR_MENU:               "editor-context-menu",
+        INLINE_EDITOR_MENU:        "inline-editor-context-menu",
+        PROJECT_MENU:              "project-context-menu",
+        WORKING_SET_MENU:          "working-set-context-menu",
+        WORKING_SET_SETTINGS_MENU: "working-set-settings-context-menu"
     };
 
 
@@ -1081,6 +1082,12 @@ define(function (require, exports, module) {
         $("#" + StringUtils.jQueryIdEscape(this.id)).removeClass("open");
     };
 
+    /**
+     * Detect if current context menu is already open
+     */
+    ContextMenu.prototype.isOpen = function () {
+        return $("#" + StringUtils.jQueryIdEscape(this.id)).hasClass("open");
+    };
     /**
      * Registers new context menu with Brackets. 
 
diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
index e50f3595797..1664af2e5e2 100644
--- a/src/htmlContent/main-view.html
+++ b/src/htmlContent/main-view.html
@@ -41,7 +41,9 @@
     <!-- Main UI: horizontal set of sidebar, main content vertical stack, and vertical toolbar -->
     <div class="main-view">
         <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-forceleft=".content">
-            <div id="working-set-header">{{WORKING_FILES}}</div>
+            <div id="working-set-header">{{WORKING_FILES}}
+                <div id="working-set-option-btn"></div>
+            </div>
             <div id="open-files-container">
                 <!-- This will contain runtime-generated <li>'s for each file in the working set -->
                 <ul>
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 2f6b1caf1c3..acaf77615f7 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -514,6 +514,7 @@ a, img {
 /* Project panel */
 
 #working-set-header {
+    position: relative;
     height: 19px;
     padding: 10px 0 9px 12px;
     background: #3C3F41;
@@ -522,6 +523,24 @@ a, img {
     overflow: hidden;
 }
 
+#working-set-option-btn {
+    position: absolute;
+    right: 4px;
+    top: 2px;
+    border: 1px solid transparent;
+    padding: 4px 6px;
+    .sprite-icon(0, 0, 16px, 16px, "images/topcoat-settings-16.svg");
+    background-position:center;
+}
+
+#working-set-option-btn:hover {
+    
+    border-radius: 3px;
+    border: 1px solid #2d2f31;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
+    text-decoration: none;
+}
+
 #sidebar {
     position: relative;
     white-space: nowrap;
diff --git a/src/styles/images/topcoat-settings-16.svg b/src/styles/images/topcoat-settings-16.svg
new file mode 100644
index 00000000000..edd7aad5bb8
--- /dev/null
+++ b/src/styles/images/topcoat-settings-16.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewBox="0, 0, 16, 16">
+  <g id="Layer 1">
+    <path d="M2.522,9.333 C2.675,9.95 2.925,10.525 3.257,11.044 L2.332,11.973 C1.916,12.388 1.92,12.636 2.285,13.002 L3.188,13.905 C3.558,14.275 3.81,14.267 4.217,13.859 L5.188,12.884 C5.645,13.146 6.141,13.348 6.667,13.478 L6.667,14.667 C6.667,15.257 6.845,15.428 7.36,15.428 L8.64,15.428 C9.162,15.428 9.333,15.245 9.333,14.667 L9.333,13.478 C9.859,13.348 10.355,13.147 10.812,12.884 L11.805,13.881 C12.217,14.288 12.464,14.296 12.834,13.932 L13.741,13.024 C14.103,12.663 14.11,12.414 13.691,11.996 L12.739,11.044 C13.075,10.525 13.325,9.95 13.477,9.333 L14.735,9.333 C15.256,9.333 15.427,9.15 15.427,8.572 L15.427,7.428 C15.427,6.865 15.277,6.667 14.735,6.667 L13.477,6.667 C13.347,6.141 13.145,5.645 12.882,5.188 L13.789,4.285 C14.189,3.885 14.224,3.638 13.839,3.257 L12.932,2.35 C12.57,1.988 12.311,1.992 11.904,2.4 L11.043,3.257 C10.525,2.925 9.95,2.675 9.333,2.522 L9.333,1.333 C9.333,0.77 9.184,0.572 8.64,0.572 L7.36,0.572 C6.845,0.572 6.667,0.758 6.667,1.333 L6.667,2.522 C6.05,2.675 5.475,2.925 4.956,3.257 L4.095,2.4 C3.688,1.992 3.428,1.988 3.067,2.35 L2.16,3.257 C1.775,3.638 1.81,3.885 2.21,4.285 L3.112,5.188 C2.853,5.645 2.652,6.141 2.522,6.667 L1.265,6.667 C0.75,6.667 0.572,6.853 0.572,7.428 L0.572,8.572 C0.572,9.162 0.75,9.333 1.265,9.333 L2.522,9.333 z M5.821,8 C5.821,6.796 6.796,5.821 8,5.821 C9.204,5.821 10.179,6.796 10.179,8 C10.179,9.204 9.204,10.179 8,10.179 C6.796,10.179 5.821,9.204 5.821,8 z" fill="#8E9A9D"/>
+  </g>
+  <defs/>
+</svg>

From a82c6845e2b5aea09e48df076a41f3f18f4e7230 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Mon, 25 Nov 2013 23:56:54 +0100
Subject: [PATCH 2/8] Reduce cog size to 13px

---
 src/styles/brackets.less                  | 2 +-
 src/styles/images/topcoat-settings-13.svg | 8 ++++++++
 src/styles/images/topcoat-settings-16.svg | 8 --------
 3 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 src/styles/images/topcoat-settings-13.svg
 delete mode 100644 src/styles/images/topcoat-settings-16.svg

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index acaf77615f7..8f645706d6d 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -529,7 +529,7 @@ a, img {
     top: 2px;
     border: 1px solid transparent;
     padding: 4px 6px;
-    .sprite-icon(0, 0, 16px, 16px, "images/topcoat-settings-16.svg");
+    .sprite-icon(0, 0, 13px, 13px, "images/topcoat-settings-13.svg");
     background-position:center;
 }
 
diff --git a/src/styles/images/topcoat-settings-13.svg b/src/styles/images/topcoat-settings-13.svg
new file mode 100644
index 00000000000..34250fbef01
--- /dev/null
+++ b/src/styles/images/topcoat-settings-13.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13" height="13" viewBox="0, 0, 13, 13">
+  <g id="Layer 1">
+    <path d="M2.049,7.583 C2.173,8.085 2.377,8.552 2.647,8.973 L1.895,9.728 C1.557,10.065 1.56,10.267 1.857,10.564 L2.59,11.298 C2.891,11.598 3.095,11.592 3.427,11.261 L4.215,10.468 C4.587,10.681 4.989,10.845 5.417,10.951 L5.417,11.917 C5.417,12.397 5.562,12.535 5.98,12.535 L7.02,12.535 C7.444,12.535 7.583,12.387 7.583,11.917 L7.583,10.951 C8.011,10.845 8.413,10.682 8.785,10.468 L9.592,11.279 C9.927,11.609 10.127,11.616 10.427,11.32 L11.164,10.582 C11.458,10.288 11.465,10.087 11.124,9.747 L10.35,8.973 C10.623,8.552 10.827,8.085 10.95,7.583 L11.972,7.583 C12.395,7.583 12.535,7.435 12.535,6.965 L12.535,6.035 C12.535,5.578 12.413,5.417 11.972,5.417 L10.95,5.417 C10.845,4.989 10.681,4.587 10.466,4.215 L11.204,3.482 C11.529,3.157 11.557,2.956 11.244,2.647 L10.507,1.91 C10.213,1.615 10.002,1.619 9.672,1.95 L8.972,2.647 C8.552,2.377 8.085,2.173 7.583,2.049 L7.583,1.083 C7.583,0.625 7.462,0.465 7.02,0.465 L5.98,0.465 C5.562,0.465 5.417,0.616 5.417,1.083 L5.417,2.049 C4.915,2.173 4.448,2.377 4.027,2.647 L3.327,1.95 C2.996,1.619 2.785,1.615 2.492,1.91 L1.755,2.647 C1.442,2.956 1.47,3.157 1.795,3.482 L2.529,4.215 C2.318,4.587 2.155,4.989 2.049,5.417 L1.028,5.417 C0.61,5.417 0.465,5.568 0.465,6.035 L0.465,6.965 C0.465,7.444 0.61,7.583 1.028,7.583 L2.049,7.583 z M4.729,6.5 C4.729,5.522 5.522,4.729 6.5,4.729 C7.478,4.729 8.271,5.522 8.271,6.5 C8.271,7.478 7.478,8.271 6.5,8.271 C5.522,8.271 4.729,7.478 4.729,6.5 z" fill="#8E9A9D"/>
+  </g>
+  <defs/>
+</svg>
diff --git a/src/styles/images/topcoat-settings-16.svg b/src/styles/images/topcoat-settings-16.svg
deleted file mode 100644
index edd7aad5bb8..00000000000
--- a/src/styles/images/topcoat-settings-16.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewBox="0, 0, 16, 16">
-  <g id="Layer 1">
-    <path d="M2.522,9.333 C2.675,9.95 2.925,10.525 3.257,11.044 L2.332,11.973 C1.916,12.388 1.92,12.636 2.285,13.002 L3.188,13.905 C3.558,14.275 3.81,14.267 4.217,13.859 L5.188,12.884 C5.645,13.146 6.141,13.348 6.667,13.478 L6.667,14.667 C6.667,15.257 6.845,15.428 7.36,15.428 L8.64,15.428 C9.162,15.428 9.333,15.245 9.333,14.667 L9.333,13.478 C9.859,13.348 10.355,13.147 10.812,12.884 L11.805,13.881 C12.217,14.288 12.464,14.296 12.834,13.932 L13.741,13.024 C14.103,12.663 14.11,12.414 13.691,11.996 L12.739,11.044 C13.075,10.525 13.325,9.95 13.477,9.333 L14.735,9.333 C15.256,9.333 15.427,9.15 15.427,8.572 L15.427,7.428 C15.427,6.865 15.277,6.667 14.735,6.667 L13.477,6.667 C13.347,6.141 13.145,5.645 12.882,5.188 L13.789,4.285 C14.189,3.885 14.224,3.638 13.839,3.257 L12.932,2.35 C12.57,1.988 12.311,1.992 11.904,2.4 L11.043,3.257 C10.525,2.925 9.95,2.675 9.333,2.522 L9.333,1.333 C9.333,0.77 9.184,0.572 8.64,0.572 L7.36,0.572 C6.845,0.572 6.667,0.758 6.667,1.333 L6.667,2.522 C6.05,2.675 5.475,2.925 4.956,3.257 L4.095,2.4 C3.688,1.992 3.428,1.988 3.067,2.35 L2.16,3.257 C1.775,3.638 1.81,3.885 2.21,4.285 L3.112,5.188 C2.853,5.645 2.652,6.141 2.522,6.667 L1.265,6.667 C0.75,6.667 0.572,6.853 0.572,7.428 L0.572,8.572 C0.572,9.162 0.75,9.333 1.265,9.333 L2.522,9.333 z M5.821,8 C5.821,6.796 6.796,5.821 8,5.821 C9.204,5.821 10.179,6.796 10.179,8 C10.179,9.204 9.204,10.179 8,10.179 C6.796,10.179 5.821,9.204 5.821,8 z" fill="#8E9A9D"/>
-  </g>
-  <defs/>
-</svg>

From 304d43bcd365be519418dfa6d0f2e3c0c69482db Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Tue, 26 Nov 2013 00:08:14 +0100
Subject: [PATCH 3/8] Reduce cog opacity for non-hover status

---
 src/styles/brackets.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 8f645706d6d..ca96bcdaa34 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -531,6 +531,7 @@ a, img {
     padding: 4px 6px;
     .sprite-icon(0, 0, 13px, 13px, "images/topcoat-settings-13.svg");
     background-position:center;
+    opacity: 0.8;
 }
 
 #working-set-option-btn:hover {
@@ -539,6 +540,7 @@ a, img {
     border: 1px solid #2d2f31;
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
     text-decoration: none;
+    opacity: 1;
 }
 
 #sidebar {

From fd64f9f3e7241e9b27b95ecaae6976b444bca3e5 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Tue, 26 Nov 2013 22:06:28 +0100
Subject: [PATCH 4/8] Fix cog color and position

---
 src/styles/brackets.less                  | 2 +-
 src/styles/images/topcoat-settings-13.svg | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index ca96bcdaa34..eba4f17d29d 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -526,7 +526,7 @@ a, img {
 #working-set-option-btn {
     position: absolute;
     right: 4px;
-    top: 2px;
+    top: 7px;
     border: 1px solid transparent;
     padding: 4px 6px;
     .sprite-icon(0, 0, 13px, 13px, "images/topcoat-settings-13.svg");
diff --git a/src/styles/images/topcoat-settings-13.svg b/src/styles/images/topcoat-settings-13.svg
index 34250fbef01..958b9edd10e 100644
--- a/src/styles/images/topcoat-settings-13.svg
+++ b/src/styles/images/topcoat-settings-13.svg
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13" height="13" viewBox="0, 0, 13, 13">
   <g id="Layer 1">
-    <path d="M2.049,7.583 C2.173,8.085 2.377,8.552 2.647,8.973 L1.895,9.728 C1.557,10.065 1.56,10.267 1.857,10.564 L2.59,11.298 C2.891,11.598 3.095,11.592 3.427,11.261 L4.215,10.468 C4.587,10.681 4.989,10.845 5.417,10.951 L5.417,11.917 C5.417,12.397 5.562,12.535 5.98,12.535 L7.02,12.535 C7.444,12.535 7.583,12.387 7.583,11.917 L7.583,10.951 C8.011,10.845 8.413,10.682 8.785,10.468 L9.592,11.279 C9.927,11.609 10.127,11.616 10.427,11.32 L11.164,10.582 C11.458,10.288 11.465,10.087 11.124,9.747 L10.35,8.973 C10.623,8.552 10.827,8.085 10.95,7.583 L11.972,7.583 C12.395,7.583 12.535,7.435 12.535,6.965 L12.535,6.035 C12.535,5.578 12.413,5.417 11.972,5.417 L10.95,5.417 C10.845,4.989 10.681,4.587 10.466,4.215 L11.204,3.482 C11.529,3.157 11.557,2.956 11.244,2.647 L10.507,1.91 C10.213,1.615 10.002,1.619 9.672,1.95 L8.972,2.647 C8.552,2.377 8.085,2.173 7.583,2.049 L7.583,1.083 C7.583,0.625 7.462,0.465 7.02,0.465 L5.98,0.465 C5.562,0.465 5.417,0.616 5.417,1.083 L5.417,2.049 C4.915,2.173 4.448,2.377 4.027,2.647 L3.327,1.95 C2.996,1.619 2.785,1.615 2.492,1.91 L1.755,2.647 C1.442,2.956 1.47,3.157 1.795,3.482 L2.529,4.215 C2.318,4.587 2.155,4.989 2.049,5.417 L1.028,5.417 C0.61,5.417 0.465,5.568 0.465,6.035 L0.465,6.965 C0.465,7.444 0.61,7.583 1.028,7.583 L2.049,7.583 z M4.729,6.5 C4.729,5.522 5.522,4.729 6.5,4.729 C7.478,4.729 8.271,5.522 8.271,6.5 C8.271,7.478 7.478,8.271 6.5,8.271 C5.522,8.271 4.729,7.478 4.729,6.5 z" fill="#8E9A9D"/>
+    <path d="M2.049,7.583 C2.173,8.085 2.377,8.552 2.647,8.973 L1.895,9.728 C1.557,10.065 1.56,10.267 1.857,10.564 L2.59,11.298 C2.891,11.598 3.095,11.592 3.427,11.261 L4.215,10.468 C4.587,10.681 4.989,10.845 5.417,10.951 L5.417,11.917 C5.417,12.397 5.562,12.535 5.98,12.535 L7.02,12.535 C7.444,12.535 7.583,12.387 7.583,11.917 L7.583,10.951 C8.011,10.845 8.413,10.682 8.785,10.468 L9.592,11.279 C9.927,11.609 10.127,11.616 10.427,11.32 L11.164,10.582 C11.458,10.288 11.465,10.087 11.124,9.747 L10.35,8.973 C10.623,8.552 10.827,8.085 10.95,7.583 L11.972,7.583 C12.395,7.583 12.535,7.435 12.535,6.965 L12.535,6.035 C12.535,5.578 12.413,5.417 11.972,5.417 L10.95,5.417 C10.845,4.989 10.681,4.587 10.466,4.215 L11.204,3.482 C11.529,3.157 11.557,2.956 11.244,2.647 L10.507,1.91 C10.213,1.615 10.002,1.619 9.672,1.95 L8.972,2.647 C8.552,2.377 8.085,2.173 7.583,2.049 L7.583,1.083 C7.583,0.625 7.462,0.465 7.02,0.465 L5.98,0.465 C5.562,0.465 5.417,0.616 5.417,1.083 L5.417,2.049 C4.915,2.173 4.448,2.377 4.027,2.647 L3.327,1.95 C2.996,1.619 2.785,1.615 2.492,1.91 L1.755,2.647 C1.442,2.956 1.47,3.157 1.795,3.482 L2.529,4.215 C2.318,4.587 2.155,4.989 2.049,5.417 L1.028,5.417 C0.61,5.417 0.465,5.568 0.465,6.035 L0.465,6.965 C0.465,7.444 0.61,7.583 1.028,7.583 L2.049,7.583 z M4.729,6.5 C4.729,5.522 5.522,4.729 6.5,4.729 C7.478,4.729 8.271,5.522 8.271,6.5 C8.271,7.478 7.478,8.271 6.5,8.271 C5.522,8.271 4.729,7.478 4.729,6.5 z" fill="#798286"/>
   </g>
   <defs/>
 </svg>

From b8db8ab20390c21a73a519617f9be239b7e35871 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Wed, 27 Nov 2013 21:45:31 +0100
Subject: [PATCH 5/8] Add tests for ContextMenu#isOpen

---
 test/spec/Menu-test.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/test/spec/Menu-test.js b/test/spec/Menu-test.js
index 46b99bb4c1b..923c2650ff4 100644
--- a/test/spec/Menu-test.js
+++ b/test/spec/Menu-test.js
@@ -283,6 +283,24 @@ define(function (require, exports, module) {
                 $menus = testWindow.$(".dropdown.open");
                 expect($menus.length).toBe(0);
             });
+            it("check for context menu to have the right status", function () {
+                var cmenu = Menus.registerContextMenu("test-cmenu55");
+                CommandManager.register("Brackets Test Command Custom 55", "Menu-test.command55", function () {});
+                var menuItem = cmenu.addMenuItem("Menu-test.command55");
+
+                cmenu.open({pageX: 0, pageY: 0});
+                
+                // verify dropdown is open
+                var isOpen = cmenu.isOpen();
+                expect(isOpen).toBe(true);
+
+                // verify close event
+                cmenu.close();
+
+                // verify all dropdowns are closed
+                isOpen = cmenu.isOpen();
+                expect(isOpen).toBe(false);
+            });
         });
     });
 
@@ -1036,6 +1054,25 @@ define(function (require, exports, module) {
                 $menus = testWindow.$(".dropdown.open");
                 expect($menus.length).toBe(0);
             });
+            
+            it("check for context menu to have the right status", function () {
+                var cmenu = Menus.registerContextMenu("test-cmenu55");
+                CommandManager.register("Brackets Test Command Custom 55", "Menu-test.command55", function () {});
+                var menuItem = cmenu.addMenuItem("Menu-test.command55");
+
+                cmenu.open({pageX: 0, pageY: 0});
+                
+                // verify dropdown is open
+                var isOpen = cmenu.isOpen();
+                expect(isOpen).toBe(true);
+
+                // verify close event
+                cmenu.close();
+
+                // verify all dropdowns are closed
+                isOpen = cmenu.isOpen();
+                expect(isOpen).toBe(false);
+            });
         });
     });
 });

From 7071d61cab7a77ee12f71b8490e6c199add91eb1 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Mon, 2 Dec 2013 21:20:49 +0100
Subject: [PATCH 6/8] Refactor work set menu sorting event handler

---
 src/command/DefaultMenus.js |  21 +---
 src/command/Menus.js        | 244 ++++++++++++++++++++----------------
 2 files changed, 140 insertions(+), 125 deletions(-)

diff --git a/src/command/DefaultMenus.js b/src/command/DefaultMenus.js
index 60e5fa25e8d..5fd455d62e4 100644
--- a/src/command/DefaultMenus.js
+++ b/src/command/DefaultMenus.js
@@ -33,6 +33,7 @@ define(function (require, exports, module) {
     
     var AppInit         = require("utils/AppInit"),
         Commands        = require("command/Commands"),
+        ContextMenu     = require("command/Menus"),
         EditorManager   = require("editor/EditorManager"),
         Menus           = require("command/Menus"),
         Strings         = require("strings");
@@ -280,24 +281,8 @@ define(function (require, exports, module) {
         /**
          * Dropdown menu for workspace sorting
          */
-        $("#working-set-option-btn").on("click", function (e) {
-            var buttonOffset,
-                buttonHeight;
-            
-            e.stopPropagation();
-            
-            if (working_set_settings_cmenu.isOpen()) {
-                working_set_settings_cmenu.close();    
-            } else {
-                buttonOffset = $(this).offset();
-                buttonHeight = $(this).outerHeight();
-                working_set_settings_cmenu.open({
-                    pageX: buttonOffset.left,
-                    pageY: buttonOffset.top + buttonHeight
-                });
-            }
-        });
-        
+        Menus.ContextMenu.assignContextMenuToSelector("#working-set-option-btn", working_set_settings_cmenu);
+
         // Prevent the browser context menu since Brackets creates a custom context menu
         $(window).contextmenu(function (e) {
             e.preventDefault();
diff --git a/src/command/Menus.js b/src/command/Menus.js
index 874acd4c2ae..306ad53bb83 100644
--- a/src/command/Menus.js
+++ b/src/command/Menus.js
@@ -1,24 +1,24 @@
 /*
  * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- *  
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"), 
- * to deal in the Software without restriction, including without limitation 
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
- * and/or sell copies of the Software, and to permit persons to whom the 
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
  * Software is furnished to do so, subject to the following conditions:
- *  
+ *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
- *  
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  * DEALINGS IN THE SOFTWARE.
- * 
+ *
  */
 
 
@@ -27,9 +27,9 @@
 
 define(function (require, exports, module) {
     "use strict";
-    
+
     var _ = require("thirdparty/lodash");
-    
+
     // Load dependent modules
     var Global              = require("utils/Global"),
         Commands            = require("command/Commands"),
@@ -69,7 +69,7 @@ define(function (require, exports, module) {
      * It is preferred that plug-ins specify the location of new MenuItems
      * in terms of a menu section rather than a specific MenuItem. This provides
      * looser coupling to Bracket's internal MenuItems and makes menu organization
-     * more semantic. 
+     * more semantic.
      * Use these constants as the "relativeID" parameter when calling addMenuItem() and
      * specify a position of FIRST_IN_SECTION or LAST_IN_SECTION.
      *
@@ -103,7 +103,7 @@ define(function (require, exports, module) {
         NAVIGATE_QUICK_DOCS_COMMANDS:       {sectionMarker: Commands.TOGGLE_QUICK_DOCS}
     };
 
-    
+
     /**
      * Insertion position constants
      * Used by addMenu(), addMenuItem(), and addSubMenu() to
@@ -121,7 +121,7 @@ define(function (require, exports, module) {
      * Other constants
      */
     var DIVIDER = "---";
-    
+
     /**
      * Error Codes from Brackets Shell
      * @enum {number}
@@ -130,7 +130,7 @@ define(function (require, exports, module) {
         ERR_UNKNOWN        = 1,
         ERR_INVALID_PARAMS = 2,
         ERR_NOT_FOUND      = 3;
-    
+
     /**
      * Maps menuID's to Menu objects
      * @type {Object.<string, Menu>}
@@ -148,16 +148,16 @@ define(function (require, exports, module) {
      * @type {Object.<string, MenuItem>}
      */
     var menuItemMap = {};
-    
+
     /**
-     * Retrieves the Menu object for the corresponding id. 
+     * Retrieves the Menu object for the corresponding id.
      * @param {string} id
      * @return {Menu}
      */
     function getMenu(id) {
         return menuMap[id];
     }
-    
+
     /**
      * Retrieves the map of all Menu objects.
      * @return {Object.<string, Menu>}
@@ -167,7 +167,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Retrieves the ContextMenu object for the corresponding id. 
+     * Retrieves the ContextMenu object for the corresponding id.
      * @param {string} id
      * @return {ContextMenu}
      */
@@ -176,20 +176,20 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Check whether a ContextMenu exists for the given id. 
+     * Check whether a ContextMenu exists for the given id.
      * @param {string} id
      * @return {boolean}
      */
     function _isContextMenu(id) {
         return !!getContextMenu(id);
     }
-    
+
     function _isHTMLMenu(id) {
         return (!brackets.nativeMenus || _isContextMenu(id));
     }
 
     /**
-     * Retrieves the MenuItem object for the corresponding id. 
+     * Retrieves the MenuItem object for the corresponding id.
      * @param {string} id
      * @return {MenuItem}
      */
@@ -204,32 +204,32 @@ define(function (require, exports, module) {
     function _getHTMLMenuItem(id) {
         return $("#" + StringUtils.jQueryIdEscape(id)).get(0);
     }
-    
+
     function _addKeyBindingToMenuItem($menuItem, key, displayKey) {
         var $shortcut = $menuItem.find(".menu-shortcut");
-        
+
         if ($shortcut.length === 0) {
             $shortcut = $("<span class='menu-shortcut' />");
             $menuItem.append($shortcut);
         }
-        
+
         $shortcut.data("key", key);
         $shortcut.text(KeyBindingManager.formatKeyDescriptor(displayKey));
     }
-    
+
     function _addExistingKeyBinding(menuItem) {
         var bindings = KeyBindingManager.getKeyBindings(menuItem.getCommand().getID()),
             binding = null;
-        
+
         if (bindings.length > 0) {
             // add the latest key binding
             binding = bindings[bindings.length - 1];
             _addKeyBindingToMenuItem($(_getHTMLMenuItem(menuItem.id)), binding.key, binding.displayKey);
         }
-        
+
         return binding;
     }
-    
+
     var _menuDividerIDCount = 1;
     function _getNextMenuItemDividerID() {
         return "brackets-menuDivider-" + _menuDividerIDCount++;
@@ -277,8 +277,8 @@ define(function (require, exports, module) {
      * may have a sub-menu. A MenuItem may correspond to an HTML-based
      * menu item or a native menu item if Brackets is running in a native application shell
      *
-     * Since MenuItems may have a native implementation clients should create MenuItems through 
-     * addMenuItem() and should NOT construct a MenuItem object directly. 
+     * Since MenuItems may have a native implementation clients should create MenuItems through
+     * addMenuItem() and should NOT construct a MenuItem object directly.
      * Clients should also not access HTML content of a menu directly and instead use
      * the MenuItem API to query and modify menus items.
      *
@@ -317,10 +317,10 @@ define(function (require, exports, module) {
      * @private
      *
      * Menu represents a top-level menu in the menu bar. A Menu may correspond to an HTML-based
-     * menu or a native menu if Brackets is running in a native application shell. 
-     * 
-     * Since menus may have a native implementation clients should create Menus through 
-     * addMenu() and should NOT construct a Menu object directly. 
+     * menu or a native menu if Brackets is running in a native application shell.
+     *
+     * Since menus may have a native implementation clients should create Menus through
+     * addMenu() and should NOT construct a Menu object directly.
      * Clients should also not access HTML content of a menu directly and instead use
      * the Menu API to query and modify menus.
      *
@@ -359,7 +359,7 @@ define(function (require, exports, module) {
      */
     Menu.prototype._getRelativeMenuItem = function (relativeID, position) {
         var $relativeElement;
-        
+
         if (relativeID) {
             if (position === FIRST_IN_SECTION || position === LAST_IN_SECTION) {
                 if (!relativeID.hasOwnProperty("sectionMarker")) {
@@ -388,13 +388,13 @@ define(function (require, exports, module) {
                         $relativeElement = $listElem;
                     }
                 }
-                
+
             } else {
                 if (relativeID.hasOwnProperty("sectionMarker")) {
                     console.error("Bad Parameter in _getRelativeMenuItem(): if relativeID is a MenuSection, position must be FIRST_IN_SECTION or LAST_IN_SECTION");
                     return null;
                 }
-                
+
                 // handle FIRST, LAST, BEFORE, & AFTER
                 var command = CommandManager.get(relativeID);
                 if (command) {
@@ -408,14 +408,14 @@ define(function (require, exports, module) {
                     return null;
                 }
             }
-            
+
             return $relativeElement;
-            
+
         } else if (position && position !== FIRST && position !== LAST) {
             console.error("Bad Parameter in _getRelativeMenuItem(): relative position specified with no relativeID");
             return null;
         }
-        
+
         return $relativeElement;
     };
 
@@ -457,10 +457,10 @@ define(function (require, exports, module) {
                 }
             });
         }
-        
+
         delete menuItemMap[menuItemID];
     };
-    
+
     /**
      * Removes the specified menu divider from this Menu.
      *
@@ -469,24 +469,24 @@ define(function (require, exports, module) {
     Menu.prototype.removeMenuDivider = function (menuItemID) {
         var menuItem,
             $HTMLMenuItem;
-        
+
         if (!menuItemID) {
             console.error("removeMenuDivider(): missing required parameters: menuItemID");
             return;
         }
-        
+
         menuItem = getMenuItem(menuItemID);
-        
+
         if (!menuItem) {
             console.error("removeMenuDivider(): parameter menuItemID: %s is not a valid menu item id", menuItemID);
             return;
         }
-        
+
         if (!menuItem.isDivider) {
             console.error("removeMenuDivider(): parameter menuItemID: %s is not a menu divider", menuItemID);
             return;
         }
-        
+
         if (_isHTMLMenu(this.id)) {
             // Targeting parent to get the menu divider <hr> and the <li> that contains it
             $HTMLMenuItem = $(_getHTMLMenuItem(menuItemID)).parent();
@@ -503,20 +503,20 @@ define(function (require, exports, module) {
                 }
             });
         }
-        
+
         if (!menuItemMap[menuItemID]) {
             console.error("removeMenuDivider(): menu divider not found in menuItemMap: %s", menuItemID);
             return;
         }
-        
+
         delete menuItemMap[menuItemID];
     };
-    
+
     /**
      * Adds a new menu item with the specified id and display text. The insertion position is
-     * specified via the relativeID and position arguments which describe a position 
-     * relative to another MenuItem or MenuGroup. It is preferred that plug-ins 
-     * insert new  MenuItems relative to a menu section rather than a specific 
+     * specified via the relativeID and position arguments which describe a position
+     * relative to another MenuItem or MenuGroup. It is preferred that plug-ins
+     * insert new  MenuItems relative to a menu section rather than a specific
      * MenuItem (see Menu Section Constants).
      *
      * TODO: Sub-menus are not yet supported, but when they are implemented this API will
@@ -524,7 +524,7 @@ define(function (require, exports, module) {
      *
      * Note, keyBindings are bound to Command objects not MenuItems. The provided keyBindings
      *      will be bound to the supplied Command object rather than the MenuItem.
-     * 
+     *
      * @param {!string | Command} command - the command the menu will execute.
      *      Pass Menus.DIVIDER for a menu divider, or just call addMenuDivider() instead.
      * @param {?string | Array.<{key: string, platform: string}>}  keyBindings - register one
@@ -573,7 +573,7 @@ define(function (require, exports, module) {
 
         // Internal id is the a composite of the parent menu id and the command id.
         id = this._getMenuItemId(commandID);
-        
+
         if (menuItemMap[id]) {
             console.log("MenuItem added with same id of existing MenuItem: " + id);
             return null;
@@ -590,12 +590,12 @@ define(function (require, exports, module) {
             } else {
                 // Create the HTML Menu
                 $menuItem = $("<li><a href='#' id='" + id + "'> <span class='menu-name'></span></a></li>");
-    
+
                 $menuItem.on("click", function () {
                     menuItem._command.execute();
                 });
             }
-    
+
             // Insert menu item
             var $relativeElement = this._getRelativeMenuItem(relativeID, position);
             _insertInList($("li#" + StringUtils.jQueryIdEscape(this.id) + " > ul.dropdown-menu"),
@@ -605,26 +605,26 @@ define(function (require, exports, module) {
                 binding,
                 bindingStr = "",
                 displayStr = "";
-            
+
             if (bindings && bindings.length > 0) {
                 binding = bindings[bindings.length - 1];
                 bindingStr = binding.displayKey || binding.key;
             }
-            
+
             if (bindingStr.length > 0) {
                 displayStr = KeyBindingManager.formatKeyDescriptor(bindingStr);
             }
-            
+
             if (position === FIRST_IN_SECTION || position === LAST_IN_SECTION) {
                 if (!relativeID.hasOwnProperty("sectionMarker")) {
                     console.error("Bad Parameter in _getRelativeMenuItem(): relativeID must be a MenuSection when position refers to a menu section");
                     return null;
                 }
-                
-                // For sections, pass in the marker for that section. 
+
+                // For sections, pass in the marker for that section.
                 relativeID = relativeID.sectionMarker;
             }
-            
+
             brackets.app.addMenuItem(this.id, name, commandID, bindingStr, displayStr, position, relativeID, function (err) {
                 switch (err) {
                 case NO_ERROR:
@@ -652,10 +652,10 @@ define(function (require, exports, module) {
                     keyBindings = [keyBindings];
                 }
             }
-                
+
             // Note that keyBindings passed during MenuItem creation take precedent over any existing key bindings
             KeyBindingManager.addBinding(commandID, keyBindings);
-            
+
             // Look for existing key bindings
             _addExistingKeyBinding(menuItem, commandID);
 
@@ -663,18 +663,18 @@ define(function (require, exports, module) {
             menuItem._enabledChanged();
             menuItem._nameChanged();
         }
-        
+
         return menuItem;
     };
 
     /**
      * Inserts divider item in menu.
      * @param {?string} position - constant defining the position of new the divider relative
-     *      to other MenuItems. Default is LAST.  (see Insertion position constants). 
-     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new 
+     *      to other MenuItems. Default is LAST.  (see Insertion position constants).
+     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new
      *      divider will be positioned relative to. Required for all position constants
      *      except FIRST and LAST
-     * 
+     *
      * @return {MenuItem} the newly created divider
      */
     Menu.prototype.addMenuDivider = function (position, relativeID) {
@@ -684,7 +684,7 @@ define(function (require, exports, module) {
     /**
      * NOT IMPLEMENTED
      * Alternative JSON based API to addMenuItem()
-     * 
+     *
      * All properties are required unless noted as optional.
      *
      * @param { Array.<{
@@ -694,9 +694,9 @@ define(function (require, exports, module) {
      *          }>} jsonStr
      *        }
      * @param {?string} position - constant defining the position of new the MenuItem relative
-     *      to other MenuItems. Default is LAST.  (see Insertion position constants). 
-     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new 
-     *      menuItem will be positioned relative to. Required when position is 
+     *      to other MenuItems. Default is LAST.  (see Insertion position constants).
+     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new
+     *      menuItem will be positioned relative to. Required when position is
      *      AFTER or BEFORE, ignored when position is FIRST or LAST.
      *
      * @return {MenuItem} the newly created MenuItem
@@ -711,11 +711,11 @@ define(function (require, exports, module) {
      * @param {!string} text displayed in menu item
      * @param {!string} id
      * @param {?string} position - constant defining the position of new the MenuItem relative
-     *      to other MenuItems. Default is LAST.  (see Insertion position constants) 
-     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new 
-     *      menuItem will be positioned relative to. Required when position is 
+     *      to other MenuItems. Default is LAST.  (see Insertion position constants)
+     * @param {?string} relativeID - id of menuItem, sub-menu, or menu section that the new
+     *      menuItem will be positioned relative to. Required when position is
      *      AFTER or BEFORE, ignored when position is FIRST or LAST.
-     * 
+     *
      * @return {MenuItem} newly created menuItem for sub-menu
      */
     // MenuItem.prototype.createSubMenu = function (text, id, position, relativeID) {
@@ -741,7 +741,7 @@ define(function (require, exports, module) {
 
     /**
      * Returns the parent Menu for this MenuItem
-     * @return {Menu} 
+     * @return {Menu}
      */
     MenuItem.prototype.getParentMenu = function () {
         var parent = $(_getHTMLMenuItem(this.id)).parents(".dropdown").get(0);
@@ -751,7 +751,7 @@ define(function (require, exports, module) {
 
         return getMenu(parent.id);
     };
-    
+
     /**
      * Synchronizes MenuItem checked state with underlying Command checked state
      */
@@ -800,7 +800,7 @@ define(function (require, exports, module) {
             $(_getHTMLMenuItem(this.id)).find(".menu-name").text(this._command.getName());
         }
     };
-    
+
     /**
      * @private
      * Updates MenuItem DOM with a keyboard shortcut label
@@ -817,7 +817,7 @@ define(function (require, exports, module) {
             _addKeyBindingToMenuItem($(_getHTMLMenuItem(this.id)), keyBinding.key, keyBinding.displayKey);
         }
     };
-    
+
     /**
      * @private
      * Updates MenuItem DOM to remove keyboard shortcut label
@@ -831,7 +831,7 @@ define(function (require, exports, module) {
             });
         } else {
             var $shortcut = $(_getHTMLMenuItem(this.id)).find(".menu-shortcut");
-            
+
             if ($shortcut.length > 0 && $shortcut.data("key") === keyBinding.key) {
                 // check for any other bindings
                 if (_addExistingKeyBinding(this) === null) {
@@ -847,20 +847,20 @@ define(function (require, exports, module) {
     function closeAll() {
         $(".dropdown").removeClass("open");
     }
-    
+
     /**
      * Adds a top-level menu to the application menu bar which may be native or HTML-based.
      *
-     * @param {!string} name - display text for menu 
+     * @param {!string} name - display text for menu
      * @param {!string} id - unique identifier for a menu.
      *      Core Menus in Brackets use a simple  title as an id, for example "file-menu".
-     *      Extensions should use the following format: "author.myextension.mymenuname". 
+     *      Extensions should use the following format: "author.myextension.mymenuname".
      * @param {?string} position - constant defining the position of new the Menu relative
      *  to other Menus. Default is LAST (see Insertion position constants).
-     *      
+     *
      * @param {?string} relativeID - id of Menu the new Menu will be positioned relative to. Required
      *      when position is AFTER or BEFORE, ignored when position is FIRST or LAST
-     * 
+     *
      * @return {?Menu} the newly created Menu
      */
     function addMenu(name, id, position, relativeID) {
@@ -872,7 +872,7 @@ define(function (require, exports, module) {
             console.error("call to addMenu() is missing required parameters");
             return null;
         }
-        
+
         // Guard against duplicate menu ids
         if (menuMap[id]) {
             console.log("Menu added with same name and id of existing Menu: " + id);
@@ -916,7 +916,7 @@ define(function (require, exports, module) {
         // Insert menu
         var $relativeElement = relativeID && $(_getHTMLMenu(relativeID));
         _insertInList($menubar, $newMenu, position, $relativeElement);
-        
+
         // Install ESC key handling
         PopUpManager.addPopUp($popUp, closeAll, false);
 
@@ -935,17 +935,17 @@ define(function (require, exports, module) {
     function removeMenu(id) {
         var menu,
             commandID = "";
-        
+
         if (!id) {
             console.error("removeMenu(): missing required parameter: id");
             return;
         }
-        
+
         if (!menuMap[id]) {
             console.error("removeMenu(): menu id not found: %s", id);
             return;
         }
-        
+
         // Remove all of the menu items in the menu
         menu = getMenu(id);
         
@@ -959,7 +959,7 @@ define(function (require, exports, module) {
                 }
             }
         });
-        
+
         if (_isHTMLMenu(id)) {
             $(_getHTMLMenu(id)).remove();
         } else {
@@ -969,7 +969,7 @@ define(function (require, exports, module) {
                 }
             });
         }
-        
+
         delete menuMap[id];
     }
 
@@ -977,7 +977,7 @@ define(function (require, exports, module) {
      * @constructor
      * @extends {Menu}
      *
-     * Represents a context menu that can open at a specific location in the UI. 
+     * Represents a context menu that can open at a specific location in the UI.
      *
      * Clients should not create this object directly and should instead use registerContextMenu()
      * to create new ContextMenu objects.
@@ -1001,14 +1001,14 @@ define(function (require, exports, module) {
 
         // insert into DOM
         $("#context-menu-bar > ul").append($newMenu);
-        
+
         var self = this;
         PopUpManager.addPopUp($popUp,
             function () {
                 self.close();
             },
             false);
-        
+
         // Listen to ContextMenu's beforeContextMenuOpen event to first close other popups
         PopUpManager.listenToContextMenu(this);
     }
@@ -1018,7 +1018,7 @@ define(function (require, exports, module) {
 
 
     /**
-     * Displays the ContextMenu at the specified location and dispatches the 
+     * Displays the ContextMenu at the specified location and dispatches the
      * "beforeContextMenuOpen" event.The menu location may be adjusted to prevent
      * clipping by the browser window. All other menus and ContextMenus will be closed
      * bofore a new menu is shown.
@@ -1065,6 +1065,7 @@ define(function (require, exports, module) {
         }
         posTop -= 30;   // shift top for hidden parent element
         posLeft += 5;
+
         
         if (clip.right > 0) {
             posLeft = Math.max(0, posLeft - clip.right);
@@ -1075,6 +1076,7 @@ define(function (require, exports, module) {
                    .css({"left": posLeft, "top": posTop});
     };
 
+
     /**
      * Closes the context menu.
      */
@@ -1088,15 +1090,43 @@ define(function (require, exports, module) {
     ContextMenu.prototype.isOpen = function () {
         return $("#" + StringUtils.jQueryIdEscape(this.id)).hasClass("open");
     };
+
+
+    /**
+     * Associate a context menu to a DOM element.
+     * This static function take care of registering event handlers for the click event
+     * listener and passing the right "position" object to the Context#open method
+     */
+    ContextMenu.assignContextMenuToSelector = function (selector, cmenu) {
+        $(selector).on("click", function (e) {
+            var buttonOffset,
+                buttonHeight;
+
+            e.stopPropagation();
+
+            if (cmenu.isOpen()) {
+                cmenu.close();
+            } else {
+                buttonOffset = $(this).offset();
+                buttonHeight = $(this).outerHeight();
+                cmenu.open({
+                    pageX: buttonOffset.left,
+                    pageY: buttonOffset.top + buttonHeight
+                });
+            }
+        });
+    };
+
+
     /**
-     * Registers new context menu with Brackets. 
+     * Registers new context menu with Brackets.
 
-     * Extensions should generally use the predefined context menus built into Brackets. Use this 
+     * Extensions should generally use the predefined context menus built into Brackets. Use this
      * API to add a new context menu to UI that is specific to an extension.
      *
      * After registering  a new context menu clients should:
      *      - use addMenuItem() to add items to the context menu
-     *      - call open() to show the context menu. 
+     *      - call open() to show the context menu.
      *      For example:
      *      $("#my_ID").contextmenu(function (e) {
      *          if (e.which === 3) {
@@ -1118,7 +1148,7 @@ define(function (require, exports, module) {
             console.error("call to registerContextMenu() is missing required parameters");
             return null;
         }
-        
+
         // Guard against duplicate menu ids
         if (contextMenuMap[id]) {
             console.log("Context Menu added with same name and id of existing Context Menu: " + id);
@@ -1152,4 +1182,4 @@ define(function (require, exports, module) {
     exports.Menu = Menu;
     exports.MenuItem = MenuItem;
     exports.ContextMenu = ContextMenu;
-});
\ No newline at end of file
+});

From 7e10b9966979fec761b2502e266f449d52147f67 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Mon, 2 Dec 2013 22:55:37 +0100
Subject: [PATCH 7/8] Refactor RecentProject ext to use
 ContextMenu#assignContextMenuToSelector

---
 src/extensions/default/RecentProjects/main.js | 141 ++++++++----------
 1 file changed, 66 insertions(+), 75 deletions(-)

diff --git a/src/extensions/default/RecentProjects/main.js b/src/extensions/default/RecentProjects/main.js
index 4a24055e2ba..9436d5a90bf 100644
--- a/src/extensions/default/RecentProjects/main.js
+++ b/src/extensions/default/RecentProjects/main.js
@@ -26,7 +26,7 @@
 
 define(function (require, exports, module) {
     "use strict";
-    
+
     // Brackets modules
     var ProjectManager          = brackets.getModule("project/ProjectManager"),
         SidebarView             = brackets.getModule("project/SidebarView"),
@@ -44,21 +44,22 @@ define(function (require, exports, module) {
         PopUpManager            = brackets.getModule("widgets/PopUpManager"),
         Strings                 = brackets.getModule("strings"),
         ProjectsMenuTemplate    = require("text!htmlContent/projects-menu.html");
-    
+
     var KeyboardPrefs = JSON.parse(require("text!keyboard.json"));
+
     
     /** @const {string} Recent Projects commands ID */
     var TOGGLE_DROPDOWN = "recentProjects.toggle";
-    
+
     /** @const {number} Maximum number of displayed recent projects */
     var MAX_PROJECTS = 20;
-    
+
     /** @type {$.Element} jQuery elements used for the dropdown menu */
     var $dropdownItem,
         $dropdownToggle,
         $dropdown,
         $links;
-    
+
     /**
      * Get the stored list of recent projects, fixing up paths as appropriate.
      * Warning: unlike most paths in Brackets, these lack a trailing "/"
@@ -66,14 +67,14 @@ define(function (require, exports, module) {
     function getRecentProjects() {
         var recentProjects = PreferencesManager.getViewState("recentProjects") || [],
             i;
-        
+
         for (i = 0; i < recentProjects.length; i++) {
             // We have to canonicalize & then de-canonicalize the path here, since our pref format uses no trailing "/"
             recentProjects[i] = FileUtils.stripTrailingSlash(ProjectManager.updateWelcomeProjectPath(recentProjects[i] + "/"));
         }
         return recentProjects;
     }
-    
+
     /**
      * Add a project to the stored list of recent projects, up to MAX_PROJECTS.
      */
@@ -81,7 +82,7 @@ define(function (require, exports, module) {
         var root = FileUtils.stripTrailingSlash(ProjectManager.getProjectRoot().fullPath),
             recentProjects = getRecentProjects(),
             index = recentProjects.indexOf(root);
-        
+
         if (index !== -1) {
             recentProjects.splice(index, 1);
         }
@@ -91,7 +92,7 @@ define(function (require, exports, module) {
         }
         PreferencesManager.setViewState("recentProjects", recentProjects);
     }
-    
+
     /**
      * Check the list of items to see if any of them are hovered, and if so trigger a mouseenter.
      * Normally the mouseenter event handles this, but when a previous item is deleted and the next
@@ -102,14 +103,14 @@ define(function (require, exports, module) {
             var offset = $(this).offset(),
                 width  = $(this).outerWidth(),
                 height = $(this).outerHeight();
-            
+
             if (pageX >= offset.left && pageX <= offset.left + width &&
                     pageY >= offset.top && pageY <= offset.top + height) {
                 $(".recent-folder-link", this).triggerHandler("mouseenter");
             }
         });
     }
-    
+
     /**
      * Create the "delete" button that shows up when you hover over a project.
      */
@@ -118,7 +119,7 @@ define(function (require, exports, module) {
             .mouseup(function (e) {
                 // Don't let the click bubble upward.
                 e.stopPropagation();
-                
+
                 // Remove the project from the preferences.
                 var recentProjects = getRecentProjects(),
                     index = recentProjects.indexOf($(this).parent().data("path")),
@@ -132,20 +133,20 @@ define(function (require, exports, module) {
                 PreferencesManager.setViewState("recentProjects", newProjects);
                 $(this).closest("li").remove();
                 checkHovers(e.pageX, e.pageY);
-                
+
                 if (newProjects.length === 1) {
                     $dropdown.find(".divider").remove();
                 }
             });
     }
-    
+
     /**
      * Hide the delete button.
      */
     function removeDeleteButton() {
         $("#recent-folder-delete").remove();
     }
-    
+
     /**
      * Show the delete button over a given target.
      */
@@ -155,8 +156,8 @@ define(function (require, exports, module) {
             .css("top", $target.position().top + 6)
             .appendTo($target);
     }
-    
-    
+
+
     /**
      * Selects the next or previous item in the list
      * @param {number} direction  +1 for next, -1 for prev
@@ -165,20 +166,20 @@ define(function (require, exports, module) {
         var $links   = $dropdown.find("a"),
             index    = $dropdownItem ? $links.index($dropdownItem) : (direction > 0 ? -1 : 0),
             $newItem = $links.eq((index + direction) % $links.length);
-        
+
         if ($dropdownItem) {
             $dropdownItem.removeClass("selected");
         }
         $newItem.addClass("selected");
-        
+
         $dropdownItem = $newItem;
         removeDeleteButton();
     }
-    
+
     /**
      * Deletes the selected item and
      * move the focus to next item in list.
-     * 
+     *
      * @return {boolean} TRUE if project is removed
      */
     function removeSelectedItem(e) {
@@ -211,7 +212,7 @@ define(function (require, exports, module) {
      */
     function keydownHook(event) {
         var keyHandled = false;
-        
+
         switch (event.keyCode) {
         case KeyEvent.DOM_VK_UP:
             selectNextItem(-1);
@@ -236,7 +237,7 @@ define(function (require, exports, module) {
             }
             break;
         }
-        
+
         if (keyHandled) {
             event.stopImmediatePropagation();
             event.preventDefault();
@@ -244,7 +245,7 @@ define(function (require, exports, module) {
         return keyHandled;
     }
 
-    
+
     /**
      * Close the dropdown.
      */
@@ -256,7 +257,7 @@ define(function (require, exports, module) {
             PopUpManager.removePopUp($dropdown);
         }
     }
-    
+
     /**
      * Remove the various event handlers that close the dropdown. This is called by the
      * PopUpManager when the dropdown is closed.
@@ -271,8 +272,8 @@ define(function (require, exports, module) {
         EditorManager.focusEditor();
         $(window).off("keydown", keydownHook);
     }
-    
-    
+
+
     /**
      * Adds the click and mouse enter/leave events to the dropdown
      */
@@ -282,7 +283,7 @@ define(function (require, exports, module) {
                 var $link = $(this),
                     id    = $link.attr("id"),
                     path  = $link.data("path");
-                
+
                 if (path) {
                     ProjectManager.openProject(path)
                         .fail(function () {
@@ -298,18 +299,18 @@ define(function (require, exports, module) {
                             }
                         });
                     closeDropdown();
-                
+
                 } else if (id === "open-folder-link") {
                     CommandManager.execute(Commands.FILE_OPEN_FOLDER);
                 }
-                
+
             })
             .on("mouseenter", "a", function () {
                 if ($dropdownItem) {
                     $dropdownItem.removeClass("selected");
                 }
                 $dropdownItem = $(this).addClass("selected");
-                
+
                 if ($dropdownItem.hasClass("recent-folder-link")) {
                     // Note: we can't depend on the event here because this can be triggered
                     // manually from checkHovers().
@@ -318,7 +319,7 @@ define(function (require, exports, module) {
             })
             .on("mouseleave", "a", function () {
                 var $link = $(this).removeClass("selected");
-                
+
                 if ($link.get(0) === $dropdownItem.get(0)) {
                     $dropdownItem = null;
                 }
@@ -327,7 +328,7 @@ define(function (require, exports, module) {
                 }
             });
     }
-    
+
     /**
      * Parses the path and returns an object with the full path, the folder name and the path without the folder.
      * @param {string} path The full path to the folder.
@@ -345,7 +346,7 @@ define(function (require, exports, module) {
             rest = "/";
             folder = path;
         }
-        
+
         return {path: path, folder: folder, rest: rest};
     }
 
@@ -360,80 +361,63 @@ define(function (require, exports, module) {
                 projectList : [],
                 Strings     : Strings
             };
-        
+
         recentProjects.forEach(function (root) {
             if (root !== currentProject) {
                 templateVars.projectList.push(parsePath(root));
             }
         });
-        
+
         return Mustache.render(ProjectsMenuTemplate, templateVars);
     }
-    
+
     /**
      * Show or hide the recent projects dropdown.
      */
-    function showDropdown() {
+    function showDropdown(position) {
         // If the dropdown is already visible, just return (so the root click handler on html
         // will close it).
         if ($dropdown) {
             return;
         }
-        
+
         Menus.closeAll();
-        
+
         $dropdown = $(renderList());
-        
         var toggleOffset = $dropdownToggle.offset();
         $dropdown
             .css({
-                left: toggleOffset.left,
-                top: toggleOffset.top + $dropdownToggle.outerHeight()
+                left: position.pageX,
+                top: position.pageY
             })
             .appendTo($("body"));
-        
+
         PopUpManager.addPopUp($dropdown, cleanupDropdown, true);
-        
+
         // TODO: should use capture, otherwise clicking on the menus doesn't close it. More fallout
         // from the fact that we can't use the Boostrap (1.4) dropdowns.
         $("html").on("click", closeDropdown);
-        
+
         // Hide the menu if the user scrolls in the project tree. Otherwise the Lion scrollbar
         // overlaps it.
         // TODO: This duplicates logic that's already in ProjectManager (which calls Menus.close()).
         // We should fix this when the popup handling is centralized in PopupManager, as well
         // as making Esc close the dropdown. See issue #1381.
         $("#project-files-container").on("scroll", closeDropdown);
-        
+
         // Hide the menu if the sidebar is hidden.
         // TODO: Is there some more general way we could handle this for dropdowns?
         $(SidebarView).on("hide", closeDropdown);
-        
+
         // Hacky: if we detect a click in the menubar, close ourselves.
         // TODO: again, we should have centralized popup management.
         $("#titlebar .nav").on("click", closeDropdown);
-        
+
         _handleListEvents();
         $(window).on("keydown", keydownHook);
     }
-    
-    /**
-     * Show or hide the recent projects dropdown.
-     * @param {$.Event} e The event object that triggered the toggling.
-     */
-    function handleMouseEvent(e) {
-        // TODO: Can't just use Bootstrap 1.4 dropdowns for this since they're hard-coded to
-        // assume that the dropdown is inside a top-level menubar created using <li>s.
-        // Have to do this stopProp to avoid the html click handler from firing when this returns.
-        e.stopPropagation();
-        
-        if ($dropdown) {
-            closeDropdown(); //close if it's already visible
-        } else {
-            showDropdown();
-        }
-    }
-    
+
+
     /**
      * Show or hide the recent projects dropdown from the toogle command.
      */
@@ -442,7 +426,7 @@ define(function (require, exports, module) {
             if (!SidebarView.isVisible()) {
                 SidebarView.show();
             }
-            
+
             showDropdown();
             $dropdown.focus();
             $links = $dropdown.find("a");
@@ -450,24 +434,24 @@ define(function (require, exports, module) {
             // but if there are none, select Open Folder instead.
             $dropdownItem = $links.eq($links.length > 1 ? 1 : 0);
             $dropdownItem.addClass("selected");
-            
+
             // If focusing the dropdown caused a modal bar to close, we need to refocus the dropdown
             window.setTimeout(function () {
                 $dropdown.focus();
             }, 0);
         }
     }
-    
+
     PreferencesManager.convertPreferences(module, {"recentProjects": "user"}, true);
-    
+
     // Register command handlers
     CommandManager.register(Strings.CMD_TOGGLE_RECENT_PROJECTS, TOGGLE_DROPDOWN, handleKeyEvent);
     KeyBindingManager.addBinding(TOGGLE_DROPDOWN, KeyboardPrefs.recentProjects);
-    
+
     // Initialize extension
     AppInit.appReady(function () {
         ExtensionUtils.loadStyleSheet(module, "styles/styles.css");
-        
+
         $(ProjectManager).on("projectOpen", add);
         $(ProjectManager).on("beforeProjectClose", add);
     });
@@ -476,7 +460,14 @@ define(function (require, exports, module) {
         $("#project-title")
             .wrap("<div id='project-dropdown-toggle'></div>")
             .after("<span class='dropdown-arrow'></span>");
-        
-        $dropdownToggle = $("#project-dropdown-toggle").click(handleMouseEvent);
+
+        var cmenuAdapter = {
+            open: showDropdown,
+            close: closeDropdown,
+            isOpen: function () {
+                return !!$dropdown;
+            }
+        };
+        Menus.ContextMenu.assignContextMenuToSelector("#project-dropdown-toggle", cmenuAdapter);
     });
 });

From 92731390fd85c7869aef626b66ce489914e6f692 Mon Sep 17 00:00:00 2001
From: Alessandro Artoni <artoale@gmail.com>
Date: Thu, 12 Dec 2013 21:00:06 +0100
Subject: [PATCH 8/8] Add @param jsdoc description

---
 src/extensions/default/RecentProjects/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/extensions/default/RecentProjects/main.js b/src/extensions/default/RecentProjects/main.js
index 9436d5a90bf..82e824f0345 100644
--- a/src/extensions/default/RecentProjects/main.js
+++ b/src/extensions/default/RecentProjects/main.js
@@ -373,6 +373,8 @@ define(function (require, exports, module) {
 
     /**
      * Show or hide the recent projects dropdown.
+     *
+     * @param {{pageX:number, pageY:number}} position - the absolute position where to open the dropdown
      */
     function showDropdown(position) {
         // If the dropdown is already visible, just return (so the root click handler on html