Tabbed Bottom Panel architecture so that multiple panels can be opened at once

src/brackets.js

@@ -135,6 +135,7 @@ define(function (require, exports, module) {
     require("utils/NodeUtils");
     require("utils/ColorUtils");
     require("view/ThemeManager");
+    require("view/DefaultPanelView");
     require("thirdparty/lodash");
     require("language/XMLUtils");
     require("language/JSONUtils");

src/extensions/default/DebugCommands/testBuilder.js

@@ -38,7 +38,7 @@ define(function (require, exports, module) {
     function toggleTestBuilder() {
         if(!$panel){
             $panel = $(panelHTML);
-            builderPanel = WorkspaceManager.createBottomPanel("phcode-test-builder-panel", $panel, 100);
+            builderPanel = WorkspaceManager.createBottomPanel("phcode-test-builder-panel", $panel, 100, "Test Builder");
             builderPanel.hide();
             _setupPanel().then(()=>{
                 builderPanel.setVisible(!builderPanel.isVisible());
@@ -49,23 +49,19 @@ define(function (require, exports, module) {
     }
     const panelHTML = `
 <div id="test-builder-panel-phcode" class="bottom-panel vert-resizable top-resizer">
-    <div class="toolbar" style="display: flex; justify-content: space-between;">
-      <div style="display: flex">
-         <div class="title">Test Builder</div>
+    <div class="toolbar" style="display: flex; justify-content: space-between; align-items: center; padding: 5px 8px;">
+      <div style="display: flex; gap: 4px;">
          <button class="btn btn-mini no-focus save-test-builder">Save</button>
          <button class="btn btn-mini primary no-focus run-test-builder">Run</button>
          <button class="btn btn-mini no-focus run-selected">Run Selected</button>
       </div>
-      <div>
+      <div style="display: flex; gap: 4px;">
          <button class="btn btn-mini no-focus mark-validate" title="Validate marks at cursor">Marks</button>
          <button class="btn btn-mini no-focus cursor-locate">cursor</button>
-         <button class="btn btn-mini no-focus text-validate" title="validate text" style="margin-right: 20px;">
-            Text</button>
-         <a href="#" class="close" style="right: 0;margin-right: 10px;">&times;</a>
-      </div>  
+         <button class="btn btn-mini no-focus text-validate" title="validate text">Text</button>
+      </div>
     </div>
     <div style="display: flex; height: 100%; overflow: scroll;">
-<!--27 px is status bar height. If this is not set, the preview code mirror editor gives weird layout issues at times-->
         <div class="test_builder-editor" style="width: 100%; height: 100%;"></div>
     </div>
 </div>`;
@@ -161,7 +157,6 @@ define(function (require, exports, module) {
             builderEditor && builderEditor.updateLayout();
         }).observe($panel[0]);
 
-        $panel.find(".close").click(toggleTestBuilder);
         $panel.find(".save-test-builder").click(saveFile);
         $panel.find(".run-test-builder").click(()=>{
             runTests();
@@ -177,7 +172,7 @@ define(function (require, exports, module) {
             return;
         }
         $panel = $(panelHTML);
-        builderPanel = WorkspaceManager.createBottomPanel("phcode-test-builder-panel", $panel, 100);
+        builderPanel = WorkspaceManager.createBottomPanel("phcode-test-builder-panel", $panel, 100, "Test Builder");
         builderPanel.hide();
         _setupPanel();
     });

src/extensions/default/Git/src/Panel.js

@@ -1212,7 +1212,7 @@ define(function (require, exports) {
             return;
         }
         const mainToolbarWidth = $mainToolbar.width();
-        let overFlowWidth = 565;
+        let overFlowWidth = 540;
         const breakpoints = [
             { width: overFlowWidth, className: "hide-when-small" },
             { width: 400, className: "hide-when-x-small" }
@@ -1240,13 +1240,12 @@ define(function (require, exports) {
         var $panelHtml = $(panelHtml);
         $panelHtml.find(".git-available, .git-not-available").hide();
 
-        gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100);
+        gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100, Strings.GIT_PANEL_TITLE);
         $gitPanel = gitPanel.$panel;
         const resizeObserver = new ResizeObserver(_panelResized);
         resizeObserver.observe($gitPanel[0]);
         $mainToolbar = $gitPanel.find(".mainToolbar");
         $gitPanel
-            .on("click", ".close", toggle)
             .on("click", ".check-all", function () {
                 if ($(this).is(":checked")) {
                     return Git.stageAll().then(function () {
@@ -1502,6 +1501,17 @@ define(function (require, exports) {
         handleGitCommit(lastCommitMessage[ProjectManager.getProjectRoot().fullPath], false, COMMIT_MODE.DEFAULT);
     });
 
+    // When the panel tab is closed externally (e.g. via the × button),
+    // update the toolbar icon and menu checked state to stay in sync.
+    WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN, function (event, panelID) {
+        if (panelID === "main-git.panel" && gitPanel) {
+            Main.$icon.toggleClass("on", false);
+            Main.$icon.toggleClass("selected-button", false);
+            CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(false);
+            Preferences.set("panelEnabled", false);
+        }
+    });
+
     exports.init = init;
     exports.refresh = refresh;
     exports.toggle = toggle;

src/extensions/default/Git/styles/git-styles.less

@@ -1013,17 +1013,12 @@
 
     .toolbar {
         overflow: visible;
-        .close {
-            position: absolute;
-            top: 22px;
-            margin-top: -10px;
-        }
     }
     .git-more-options-btn {
         position: absolute;
-        right: 25px;
-        top: 8px;
-        padding: 4px 8px 2px 8px;
+        right: 8px;
+        top: 5px;
+        padding: 4px 9px 2px 8px;
         opacity: .7;
         .dark & {
             opacity: .5;
@@ -1070,7 +1065,11 @@
         .btn-group {
             line-height: 1;
             button {
-                height: 26px;
+                height: 22px;
+                margin-top: 2px;
+                margin-bottom: 2px;
+                padding-top: 2px;
+                padding-bottom: 2px;
             }
         }
     }
@@ -1086,7 +1085,7 @@
     }
     .git-right-icons {
         position:absolute;
-        right: 55px;
+        right: 32px;
         top: 5px;
     }
     .octicon:not(:only-child) {

src/extensions/default/Git/templates/git-panel.html

@@ -69,8 +69,7 @@
             </div>
         </div>
         <div class="git-more-options-btn btn-alt-quiet"><i class="fa-solid fa-ellipsis-vertical"></i></div>
-        <a href="#" class="close">&times;</a>
 
     </div>
-    <div class="table-container" style="height: calc(100% - 42px);"></div>
+    <div class="table-container" style="height: calc(100% - 36px);"></div>
 </div>

src/extensionsIntegrated/CustomSnippets/UIHelper.js

@@ -21,9 +21,11 @@
 /* eslint-disable no-invalid-this */
 define(function (require, exports, module) {
     const StringUtils = require("utils/StringUtils");
-    const Global = require("./global");
     const Strings = require("strings");
 
+    /** @type {Object} Reference to the panel instance, set via init() */
+    let _panel;
+
     /**
      * this is a generic function to show error messages for input fields
      *
@@ -113,7 +115,6 @@ define(function (require, exports, module) {
         const $backToListMenuBtn = $("#back-to-list-menu-btn");
         const $addNewSnippetBtn = $("#add-new-snippet-btn");
         const $filterSnippetsPanel = $("#filter-snippets-panel");
-        const $toolbarTitle = $(".toolbar-title");
 
         $addSnippetMenu.removeClass("hidden");
         $snippetListMenu.addClass("hidden");
@@ -122,7 +123,9 @@ define(function (require, exports, module) {
         $addNewSnippetBtn.addClass("hidden");
         $filterSnippetsPanel.addClass("hidden");
 
-        $toolbarTitle.html(`${Strings.CUSTOM_SNIPPETS_ADD_PANEL_TITLE} <span id="snippets-count" class="snippets-count"></span>`);
+        if (_panel) {
+            _panel.setTitle(Strings.CUSTOM_SNIPPETS_ADD_PANEL_TITLE);
+        }
     }
 
     /**
@@ -137,7 +140,6 @@ define(function (require, exports, module) {
         const $backToListMenuBtn = $("#back-to-list-menu-btn");
         const $addNewSnippetBtn = $("#add-new-snippet-btn");
         const $filterSnippetsPanel = $("#filter-snippets-panel");
-        const $toolbarTitle = $(".toolbar-title");
 
         $addSnippetMenu.addClass("hidden");
         $editSnippetMenu.addClass("hidden");
@@ -147,12 +149,9 @@ define(function (require, exports, module) {
         $addNewSnippetBtn.removeClass("hidden");
         $filterSnippetsPanel.removeClass("hidden");
 
-        // add the snippet count in the toolbar (the no. of snippets added)
-        const snippetCount = Global.SnippetHintsList.length;
-        const countText = snippetCount > 0 ? `(${snippetCount})` : "";
-        $toolbarTitle.html(
-            `${Strings.CUSTOM_SNIPPETS_PANEL_TITLE} <span id="snippets-count" class="snippets-count">${countText}</span>`
-        );
+        if (_panel) {
+            _panel.setTitle(Strings.CUSTOM_SNIPPETS_PANEL_TITLE);
+        }
 
         $("#filter-snippets-input").val("");
     }
@@ -167,7 +166,6 @@ define(function (require, exports, module) {
         const $backToListMenuBtn = $("#back-to-list-menu-btn");
         const $addNewSnippetBtn = $("#add-new-snippet-btn");
         const $filterSnippetsPanel = $("#filter-snippets-panel");
-        const $toolbarTitle = $(".toolbar-title");
 
         $editSnippetMenu.removeClass("hidden");
         $snippetListMenu.addClass("hidden");
@@ -176,8 +174,9 @@ define(function (require, exports, module) {
         $addNewSnippetBtn.addClass("hidden");
         $filterSnippetsPanel.addClass("hidden");
 
-        // Update toolbar title
-        $toolbarTitle.html(`${Strings.CUSTOM_SNIPPETS_EDIT_PANEL_TITLE} <span id="snippets-count" class="snippets-count"></span>`);
+        if (_panel) {
+            _panel.setTitle(Strings.CUSTOM_SNIPPETS_EDIT_PANEL_TITLE);
+        }
     }
 
     /**
@@ -213,18 +212,24 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Initializes the toolbar title for the list view
-     * This is called when the panel is first opened to ensure the snippet count is displayed
+     * Resets the tab title back to the default list view title.
+     * Called when the panel is first opened or toggled visible.
      */
     function initializeListViewToolbarTitle() {
-        const $toolbarTitle = $(".toolbar-title");
-        const snippetCount = Global.SnippetHintsList.length;
-        const countText = snippetCount > 0 ? `(${snippetCount})` : "";
-        $toolbarTitle.html(
-            `${Strings.CUSTOM_SNIPPETS_PANEL_TITLE} <span id="snippets-count" class="snippets-count">${countText}</span>`
-        );
+        if (_panel) {
+            _panel.setTitle(Strings.CUSTOM_SNIPPETS_PANEL_TITLE);
+        }
+    }
+
+    /**
+     * Sets the panel reference so UIHelper can update the tab title.
+     * @param {Object} panel  The Panel instance returned by WorkspaceManager.createBottomPanel
+     */
+    function init(panel) {
+        _panel = panel;
     }
 
+    exports.init = init;
     exports.showEmptySnippetMessage = showEmptySnippetMessage;
     exports.showSnippetsList = showSnippetsList;
     exports.clearSnippetsList = clearSnippetsList;

src/extensionsIntegrated/CustomSnippets/helper.js

@@ -569,20 +569,6 @@ define(function (require, exports, module) {
         $("#edit-file-extn-box").val("");
     }
 
-    /**
-     * Updates the snippets count which is displayed in the toolbar at the left side
-     * @private
-     */
-    function updateSnippetsCount() {
-        const count = Global.SnippetHintsList.length;
-        const $countSpan = $("#snippets-count");
-        if (count > 0) {
-            $countSpan.text(`(${count})`);
-        } else {
-            $countSpan.text("");
-        }
-    }
-
     /**
      * validates and sanitizes file extension input
      *
@@ -932,7 +918,6 @@ define(function (require, exports, module) {
     exports.isSnippetSupportedInFile = isSnippetSupportedInFile;
     exports.hasExactMatchingSnippet = hasExactMatchingSnippet;
     exports.getMatchingSnippets = getMatchingSnippets;
-    exports.updateSnippetsCount = updateSnippetsCount;
     exports.sanitizeFileExtensionInput = sanitizeFileExtensionInput;
     exports.handleFileExtensionInput = handleFileExtensionInput;
     exports.handleFileExtensionKeypress = handleFileExtensionKeypress;

src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html

@@ -1,10 +1,10 @@
 <div id="custom-snippets-panel" class="custom-snippets-panel bottom-panel vert-resizable top-resizer no-focus">
     <div id="custom-snippets-toolbar" class="toolbar simple-toolbar-layout">
         <div class="title-wrapper">
-            <span class="title toolbar-title">{{Strings.CUSTOM_SNIPPETS_PANEL_TITLE}} <span id="snippets-count" class="snippets-count"></span></span>
             <div id="add-new-snippet-btn" class="custom-snippet-btn">
                 <button title="{{Strings.CUSTOM_SNIPPETS_ADD_NEW_TITLE}}">
                     <i class="fas fa-plus"></i>
+                    <span class="add-btn-text">{{Strings.CUSTOM_SNIPPETS_ADD_BTN_LABEL}}</span>
                 </button>
             </div>
             <div id="back-to-list-menu-btn" class="custom-snippet-btn hidden">
@@ -18,7 +18,6 @@
             <div id="filter-snippets-panel" class="filter-snippets-panel">
                 <input id="filter-snippets-input" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_FILTER_PLACEHOLDER}}" autocomplete="off" />
             </div>
-            <a href="#" class="close" id="close-custom-snippets-panel-btn">&times;</a>
         </div>
     </div>
 

src/extensionsIntegrated/CustomSnippets/main.js

@@ -58,7 +58,9 @@ define(function (require, exports, module) {
      * @private
      */
     function _createPanel() {
-        customSnippetsPanel = WorkspaceManager.createBottomPanel(PANEL_ID, $snippetsPanel, PANEL_MIN_SIZE);
+        customSnippetsPanel = WorkspaceManager.createBottomPanel(PANEL_ID, $snippetsPanel, PANEL_MIN_SIZE,
+            Strings.CUSTOM_SNIPPETS_PANEL_TITLE);
+        UIHelper.init(customSnippetsPanel);
         customSnippetsPanel.show();
 
         // also register the handlers
@@ -129,7 +131,6 @@ define(function (require, exports, module) {
      * @private
      */
     function _registerHandlers() {
-        const $closePanelBtn = $("#close-custom-snippets-panel-btn");
         const $saveCustomSnippetBtn = $("#save-custom-snippet-btn");
         const $cancelCustomSnippetBtn = $("#cancel-custom-snippet-btn");
         const $abbrInput = $("#abbr-box");
@@ -161,10 +162,6 @@ define(function (require, exports, module) {
             SnippetsList.showSnippetsList();
         });
 
-        $closePanelBtn.on("click", function () {
-            _hidePanel();
-        });
-
         $saveCustomSnippetBtn.on("click", function () {
             Driver.handleSaveBtnClick();
         });
@@ -258,6 +255,14 @@ define(function (require, exports, module) {
         });
     }
 
+    // When the panel tab is closed externally (e.g. via the × button),
+    // update the menu checked state to stay in sync.
+    WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN, function (event, panelID) {
+        if (panelID === PANEL_ID && customSnippetsPanel) {
+            CommandManager.get(MY_COMMAND_ID).setChecked(false);
+        }
+    });
+
     AppInit.appReady(function () {
         CommandManager.register(MENU_ITEM_NAME, MY_COMMAND_ID, showCustomSnippetsPanel);
         // Render template with localized strings

src/extensionsIntegrated/CustomSnippets/snippetsList.js

@@ -180,8 +180,6 @@ define(function (require, exports, module) {
                     console.error("failed to delete custom snippet correctly:", error);
                 });
 
-            // update the snippets count in toolbar
-            Helper.updateSnippetsCount();
             // Refresh the entire list to properly handle filtering
             showSnippetsList();
         }