feat: handle close all tabs from more-options button

Author: devvaannsh

src/extensionsIntegrated/TabBar/helper.js

@@ -10,12 +10,17 @@ 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) {
+    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);
@@ -25,12 +30,17 @@ 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) {
+    function _hideTabBar($tabBar, $moreOptions) {
         if ($tabBar) {
             $tabBar.hide();
+            if($moreOptions) {
+                $moreOptions.hide();
+            }
             WorkspaceManager.recomputeLayout(true);
         }
     }

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

@@ -2,7 +2,7 @@
     <div id="phoenix-tab-bar-2" class="phoenix-tab-bar">
 
     </div>
-    <div id="tab-bar-more-options" class="tab-bar-more-options">
+    <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

@@ -147,11 +147,11 @@ define(function (require, exports, module) {
         const $secondTabBar = $('#phoenix-tab-bar-2');
 
         if (firstPaneWorkingSet.length === 0 && ($('#phoenix-tab-bar'))) {
-            Helper._hideTabBar($('#phoenix-tab-bar'));
+            Helper._hideTabBar($('#phoenix-tab-bar'), $('#tab-bar-more-options'));
         }
 
         if (secondPaneWorkingSet.length === 0 && ($('#phoenix-tab-bar-2'))) {
-            Helper._hideTabBar($('#phoenix-tab-bar-2'));
+            Helper._hideTabBar($('#phoenix-tab-bar-2'), $('#tab-bar-more-options-2'));
         }
 
         // get the count of tabs that we want to display in the tab bar (from preference settings)
@@ -371,6 +371,16 @@ define(function (require, exports, module) {
             const $tab = $tabBar.find(`.tab[data-path="${filePath}"]`);
             $tab.toggleClass('dirty', doc.isDirty);
         });
+
+        // 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");
+        });
     }
 
 
@@ -404,7 +414,5 @@ define(function (require, exports, module) {
 
         // handle when a single tab gets clicked
         handleTabClick();
-
-        MoreOptions.handleMoreOptionsClick();
     });
 });

src/extensionsIntegrated/TabBar/more-options.js

@@ -1,36 +1,65 @@
+/*
+ * This file manages the more options context menu.
+ * The more option button is present at the right side of the tab bar.
+ * When clicked, it will show the more options context menu.
+ * which will have various options related to the tab bar
+ */
 define(function (require, exports, module) {
-    const DropdownButton = brackets.getModule("widgets/DropdownButton");
+    const DropdownButton = require("widgets/DropdownButton");
+    const Strings = require("strings");
+    const MainViewManager = require("view/MainViewManager");
+    const CommandManager = require("command/CommandManager");
+    const Commands = require("command/Commands");
 
-    function showMoreOptionsContextMenu(x, y) {
-        const items = [
-            "close all tabs",
-            "close unmodified tabs"
-        ];
+    // List of items to show in the context menu
+    // Strings defined in `src/nls/root/strings.js`
+    const items = [
+        Strings.CLOSE_ALL_TABS,
+        Strings.CLOSE_UNMODIFIED_TABS
+    ];
+
+
+    /**
+     * This function is called when the close all tabs option is selected from the context menu
+     * This will close all tabs no matter whether they are in first pane or second pane
+     */
+    function handleCloseAllTabs() {
+        CommandManager.execute(Commands.FILE_CLOSE_ALL);
+    }
+
+
+    /**
+     * This function is called when the more options button is clicked
+     * This will show the more options context menu
+     * @param {String} paneId - the id of the pane ["first-pane", "second-pane"]
+     */
+    function showMoreOptionsContextMenu(paneId) {
 
         const dropdown = new DropdownButton.DropdownButton("", items);
 
-        $(".tab-bar-more-options").append(dropdown.$button);
+        // 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);
+        }
+
         dropdown.showDropdown();
 
-        dropdown.$button.on(DropdownButton.EVENT_SELECTED, function (e, item, index) {
-            console.log("Selected item:", item);
-            // TODO: Add the logic here
-            // check for index and then call the items
+        // handle the option selection
+        dropdown.on("select", function (e, item, index) {
+            if (index === 0) {
+                handleCloseAllTabs(paneId);
+            }
         });
 
-        $(document).one("click", function () {
-            dropdown.closeDropdown();
+        dropdown.$button.css({
+            display: "none"
         });
-    }
 
-    function handleMoreOptionsClick() {
-        $(document).on("click", ".tab-bar-more-options", function (event) {
-            event.stopPropagation();
-            showMoreOptionsContextMenu(event.pageX, event.pageY);
-        });
     }
 
     module.exports = {
-        handleMoreOptionsClick
+        showMoreOptionsContextMenu
     };
 });

src/nls/root/strings.js

@@ -426,6 +426,10 @@ define({
     "STATUSBAR_TASKS_STOP": "Stop",
     "STATUSBAR_TASKS_RESTART": "Restart",
 
+    // Tab bar Strings
+    "CLOSE_ALL_TABS": "Close All Tabs",
+    "CLOSE_UNMODIFIED_TABS": "Close Unmodified Tabs",
+
     // CodeInspection: errors/warnings
     "ERRORS_NO_FILE": "No File Open",
     "ERRORS_PANEL_TITLE_MULTIPLE": "{0} Problems - {1}",

src/styles/Extn-TabBar.less

@@ -26,7 +26,8 @@
 }
 
 
-.tab-bar-more-options {
+.tab-bar-more-options,
+.tab-bar-more-options-2 {
     display: flex;
     align-items: center;
     height: 2rem;
@@ -38,12 +39,14 @@
 }
 
 
-.tab-bar-more-options:hover {
+.tab-bar-more-options:hover,
+.tab-bar-more-options-2:hover {
     background-color: #333;
 }
 
 
-.tab-bar-more-options::before {
+.tab-bar-more-options::before,
+.tab-bar-more-options-2::before {
     content: "";
     position: absolute;
     top: 0;