feat: replace more options button with tabs right click handler

Author: devvaannsh

src/extensionsIntegrated/TabBar/helper.js

@@ -10,17 +10,13 @@ define(function (require, exports, module) {
     /**
      * Shows the tab bar, when its hidden.
      * Its only shown when tab bar is enabled and there is atleast one working file
-     * We need to show both the tab bar and the more options
      *
      * @param {$.Element} $tabBar - The tab bar element
      * @param {$.Element} $moreOptions - The more options element
      */
     function _showTabBar($tabBar, $moreOptions) {
         if ($tabBar) {
             $tabBar.show();
-            if($moreOptions) {
-                $moreOptions.show();
-            }
             // when we add/remove something from the editor, the editor shifts up/down which leads to blank space
             // so we need to recompute the layout to make sure things are in the right place
             WorkspaceManager.recomputeLayout(true);
@@ -30,17 +26,13 @@ define(function (require, exports, module) {
     /**
      * Hides the tab bar.
      * Its hidden when tab bar feature is disabled or there are no working files
-     * Both the tab bar and the more options should be hidden to hide the tab bar container
      *
      * @param {$.Element} $tabBar - The tab bar element
      * @param {$.Element} $moreOptions - The more options element
      */
     function _hideTabBar($tabBar, $moreOptions) {
         if ($tabBar) {
             $tabBar.hide();
-            if($moreOptions) {
-                $moreOptions.hide();
-            }
             WorkspaceManager.recomputeLayout(true);
         }
     }

src/extensionsIntegrated/TabBar/html/tabbar-pane.html

@@ -2,7 +2,4 @@
     <div id="phoenix-tab-bar" class="phoenix-tab-bar">
 
     </div>
-    <div id="tab-bar-more-options" class="tab-bar-more-options">
-        <i class="fa-solid fa-ellipsis-vertical"></i>
-    </div>
 </div>

src/extensionsIntegrated/TabBar/html/tabbar-second-pane.html

@@ -2,7 +2,4 @@
     <div id="phoenix-tab-bar-2" class="phoenix-tab-bar">
 
     </div>
-    <div id="tab-bar-more-options-2" class="tab-bar-more-options-2">
-        <i class="fa-solid fa-ellipsis-vertical"></i>
-    </div>
 </div>

src/extensionsIntegrated/TabBar/main.js

@@ -148,11 +148,11 @@ define(function (require, exports, module) {
         const $secondTabBar = $('#phoenix-tab-bar-2');
 
         if (Global.firstPaneWorkingSet.length === 0 && ($('#phoenix-tab-bar'))) {
-            Helper._hideTabBar($('#phoenix-tab-bar'), $('#tab-bar-more-options'));
+            Helper._hideTabBar($('#phoenix-tab-bar'));
         }
 
         if (Global.secondPaneWorkingSet.length === 0 && ($('#phoenix-tab-bar-2'))) {
-            Helper._hideTabBar($('#phoenix-tab-bar-2'), $('#tab-bar-more-options-2'));
+            Helper._hideTabBar($('#phoenix-tab-bar-2'));
         }
 
         // get the count of tabs that we want to display in the tab bar (from preference settings)
@@ -345,6 +345,19 @@ define(function (require, exports, module) {
                 event.stopPropagation();
             }
         });
+
+        // Add contextmenu (right-click) handler
+        $(document).on("contextmenu", ".tab", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Determine which pane the tab belongs to
+            const isSecondPane = $(this).closest("#phoenix-tab-bar-2").length > 0;
+            const paneId = isSecondPane ? "second-pane" : "first-pane";
+
+            // Show context menu at mouse position
+            MoreOptions.showMoreOptionsContextMenu(paneId, event.pageX, event.pageY);
+        });
     }
 
 
@@ -397,16 +410,6 @@ define(function (require, exports, module) {
                 }
             }
         });
-
-        // handle click events on the tab bar more options button
-        $(document).on("click", ".tab-bar-more-options", function (event) {
-            event.stopPropagation();
-            MoreOptions.showMoreOptionsContextMenu("first-pane");
-        });
-        $(document).on("click", ".tab-bar-more-options-2", function (event) {
-            event.stopPropagation();
-            MoreOptions.showMoreOptionsContextMenu("second-pane");
-        });
     }
 
 

src/extensionsIntegrated/TabBar/more-options.js

@@ -51,38 +51,44 @@ define(function (require, exports, module) {
 
 
     /**
-     * This function is called when the more options button is clicked
+     * This function is called when a tab is right-clicked
      * This will show the more options context menu
+     *
      * @param {String} paneId - the id of the pane ["first-pane", "second-pane"]
+     * @param {Number} x - the x coordinate for positioning the menu
+     * @param {Number} y - the y coordinate for positioning the menu
      */
-    function showMoreOptionsContextMenu(paneId) {
-
+    function showMoreOptionsContextMenu(paneId, x, y) {
         const dropdown = new DropdownButton.DropdownButton("", items);
 
-        // we need to determine which pane the tab belongs to show the context menu at the right place
-        if (paneId === "first-pane") {
-            $("#tab-bar-more-options").append(dropdown.$button);
-        } else {
-            $("#tab-bar-more-options-2").append(dropdown.$button);
-        }
+        // Append to document body for absolute positioning
+        $("body").append(dropdown.$button);
+
+        // Position the dropdown at the mouse coordinates
+        dropdown.$button.css({
+            position: "absolute",
+            left: x + "px",
+            top: y + "px",
+            zIndex: 1000
+        });
 
         dropdown.showDropdown();
 
         // handle the option selection
         dropdown.on("select", function (e, item, index) {
             if (index === 0) {
                 handleCloseAllTabs();
-            } else if(index === 1) {
+            } else if (index === 1) {
                 handleCloseUnmodifiedTabs();
-            } else if(index === 2) {
+            } else if (index === 2) {
                 reopenClosedFile();
             }
         });
 
+        // Remove the button after the dropdown is hidden
         dropdown.$button.css({
             display: "none"
         });
-
     }
 
     module.exports = {

src/styles/Extn-TabBar.less

@@ -26,38 +26,6 @@
 }
 
 
-.tab-bar-more-options,
-.tab-bar-more-options-2 {
-    display: flex;
-    align-items: center;
-    height: 2rem;
-    padding: 0 0.5rem;
-    cursor: pointer;
-    position: relative;
-    z-index: 2;
-    margin-left: auto;
-}
-
-
-.tab-bar-more-options:hover,
-.tab-bar-more-options-2:hover {
-    background-color: #333;
-}
-
-
-.tab-bar-more-options::before,
-.tab-bar-more-options-2::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -1rem;
-    width: 1rem;
-    height: 100%;
-    pointer-events: none;
-    background: linear-gradient(to right, rgba(30, 30, 30, 0), #1E1E1E);
-}
-
-
 .tab {
     display: inline-flex;
     align-items: center;