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

docs/API-Reference/command/Commands.md

@@ -992,6 +992,12 @@ Performs a mixed reset
 ## CMD\_GIT\_TOGGLE\_PANEL
 Toggles the git panel
 
+**Kind**: global variable
+<a name="CMD_CUSTOM_SNIPPETS_PANEL"></a>
+
+## CMD\_CUSTOM\_SNIPPETS\_PANEL
+Toggles the custom snippets panel
+
 **Kind**: global variable  
 <a name="CMD_GIT_GOTO_NEXT_CHANGE"></a>
 

docs/API-Reference/document/Document.md

@@ -248,7 +248,7 @@ Given a character index within the document text (assuming \n newlines),
 returns the corresponding {line, ch} position. Works whether or not
 a master editor is attached.
 
-**Kind**: instance method of [<code>Document</code>](#Document)  
+**Kind**: instance method of [<code>Document</code>](#Document)
 
 | Param | Type | Description |
 | --- | --- | --- |

docs/API-Reference/search/SearchResultsView.md

@@ -21,12 +21,13 @@ Dispatches the following events_
 ### new Handles the search results panel.
 Dispatches the following events:
      replaceBatch - when the Replace button is clicked.
-     close - when the panel is closed.(model, panelID, panelName, type)
+     close - when the panel is closed.(model, panelID, panelName, type, [title])
 
 | Param | Type | Description |
 | --- | --- | --- |
 | model | <code>SearchModel</code> | The model that this view is showing. |
 | panelID | <code>string</code> | The CSS ID to use for the panel. |
 | panelName | <code>string</code> | The name to use for the panel, as passed to WorkspaceManager.createBottomPanel(). |
 | type | <code>string</code> | type to identify if it is reference search or string match serach |
+| [title] | <code>string</code> | Display title for the panel tab. |
 

docs/API-Reference/view/PanelView.md

@@ -9,25 +9,29 @@ const PanelView = brackets.getModule("view/PanelView")
 **Kind**: global class  
 
 * [Panel](#Panel)
-    * [new Panel($panel)](#new_Panel_new)
+    * [new Panel($panel, id, [title])](#new_Panel_new)
     * [.$panel](#Panel+$panel) : <code>jQueryObject</code>
     * [.isVisible()](#Panel+isVisible) ⇒ <code>boolean</code>
     * [.registerCanBeShownHandler(canShowHandlerFn)](#Panel+registerCanBeShownHandler) ⇒ <code>boolean</code>
     * [.canBeShown()](#Panel+canBeShown) ⇒ <code>boolean</code>
     * [.show()](#Panel+show)
     * [.hide()](#Panel+hide)
     * [.setVisible(visible)](#Panel+setVisible)
+    * [.setTitle(newTitle)](#Panel+setTitle)
+    * [.destroy()](#Panel+destroy)
     * [.getPanelType()](#Panel+getPanelType) ⇒ <code>string</code>
 
 <a name="new_Panel_new"></a>
 
-### new Panel($panel)
+### new Panel($panel, id, [title])
 Represents a panel below the editor area (a child of ".content").
 
 
 | Param | Type | Description |
 | --- | --- | --- |
 | $panel | <code>jQueryObject</code> | The entire panel, including any chrome, already in the DOM. |
+| id | <code>string</code> | Unique panel identifier. |
+| [title] | <code>string</code> | Optional display title for the tab bar. |
 
 <a name="Panel+$panel"></a>
 
@@ -84,12 +88,66 @@ Sets the panel's visibility state
 | --- | --- | --- |
 | visible | <code>boolean</code> | true to show, false to hide |
 
+<a name="Panel+setTitle"></a>
+
+### panel.setTitle(newTitle)
+Updates the display title shown in the tab bar for this panel.
+
+**Kind**: instance method of [<code>Panel</code>](#Panel)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| newTitle | <code>string</code> | The new title to display. |
+
+<a name="Panel+destroy"></a>
+
+### panel.destroy()
+Destroys the panel, removing it from the tab bar, internal maps, and the DOM.
+After calling this, the Panel instance should not be reused.
+
+**Kind**: instance method of [<code>Panel</code>](#Panel)
 <a name="Panel+getPanelType"></a>
 
 ### panel.getPanelType() ⇒ <code>string</code>
 gets the Panel's type
 
 **Kind**: instance method of [<code>Panel</code>](#Panel)  
+<a name="_panelMap"></a>
+
+## \_panelMap : <code>Object.&lt;string, Panel&gt;</code>
+Maps panel ID to Panel instance
+
+**Kind**: global variable
+<a name="_$container"></a>
+
+## \_$container : <code>jQueryObject</code>
+The single container wrapping all bottom panels
+
+**Kind**: global variable
+<a name="_$tabBar"></a>
+
+## \_$tabBar : <code>jQueryObject</code>
+The tab bar inside the container
+
+**Kind**: global variable
+<a name="_$tabsOverflow"></a>
+
+## \_$tabsOverflow : <code>jQueryObject</code>
+Scrollable area holding the tab elements
+
+**Kind**: global variable
+<a name="_openIds"></a>
+
+## \_openIds : <code>Array.&lt;string&gt;</code>
+Ordered list of currently open (tabbed) panel IDs
+
+**Kind**: global variable
+<a name="_activeId"></a>
+
+## \_activeId : <code>string</code> \| <code>null</code>
+The panel ID of the currently visible (active) tab
+
+**Kind**: global variable
 <a name="EVENT_PANEL_HIDDEN"></a>
 
 ## EVENT\_PANEL\_HIDDEN : <code>string</code>
@@ -108,3 +166,30 @@ Event when panel is shown
 type for bottom panel
 
 **Kind**: global constant  
+<a name="init"></a>
+
+## init($container, $tabBar, $tabsOverflow)
+Initializes the PanelView module with references to the bottom panel container DOM elements.
+Called by WorkspaceManager during htmlReady.
+
+**Kind**: global function
+
+| Param | Type | Description |
+| --- | --- | --- |
+| $container | <code>jQueryObject</code> | The bottom panel container element. |
+| $tabBar | <code>jQueryObject</code> | The tab bar element inside the container. |
+| $tabsOverflow | <code>jQueryObject</code> | The scrollable area holding tab elements. |
+
+<a name="getOpenBottomPanelIDs"></a>
+
+## getOpenBottomPanelIDs() ⇒ <code>Array.&lt;string&gt;</code>
+Returns a copy of the currently open bottom panel IDs in tab order.
+
+**Kind**: global function
+<a name="hideAllOpenPanels"></a>
+
+## hideAllOpenPanels() ⇒ <code>Array.&lt;string&gt;</code>
+Hides every open bottom panel tab in a single batch
+
+**Kind**: global function
+**Returns**: <code>Array.&lt;string&gt;</code> - The IDs of panels that were open (useful for restoring later).

docs/API-Reference/view/WorkspaceManager.md

@@ -22,10 +22,14 @@ Events:
         * [.PANEL_TYPE_BOTTOM_PANEL](#module_view/WorkspaceManager.PANEL_TYPE_BOTTOM_PANEL) : <code>string</code>
         * [.PANEL_TYPE_PLUGIN_PANEL](#module_view/WorkspaceManager.PANEL_TYPE_PLUGIN_PANEL) : <code>string</code>
     * _inner_
+        * [.$bottomPanelContainer](#module_view/WorkspaceManager..$bottomPanelContainer) : <code>jQueryObject</code>
+        * [.$statusBarPanelToggle](#module_view/WorkspaceManager..$statusBarPanelToggle) : <code>jQueryObject</code>
+        * [._statusBarToggleInProgress](#module_view/WorkspaceManager.._statusBarToggleInProgress) : <code>boolean</code>
         * [.EVENT_WORKSPACE_UPDATE_LAYOUT](#module_view/WorkspaceManager..EVENT_WORKSPACE_UPDATE_LAYOUT)
         * [.EVENT_WORKSPACE_PANEL_SHOWN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_SHOWN)
         * [.EVENT_WORKSPACE_PANEL_HIDDEN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_HIDDEN)
-        * [.createBottomPanel(id, $panel, [minSize])](#module_view/WorkspaceManager..createBottomPanel) ⇒ <code>Panel</code>
+        * [.createBottomPanel(id, $panel, [minSize], [title])](#module_view/WorkspaceManager..createBottomPanel) ⇒ <code>Panel</code>
+        * [.destroyBottomPanel(id)](#module_view/WorkspaceManager..destroyBottomPanel)
         * [.createPluginPanel(id, $panel, [minSize], $toolbarIcon, [initialSize])](#module_view/WorkspaceManager..createPluginPanel) ⇒ <code>Panel</code>
         * [.getAllPanelIDs()](#module_view/WorkspaceManager..getAllPanelIDs) ⇒ <code>Array</code>
         * [.getPanelForID(panelID)](#module_view/WorkspaceManager..getPanelForID) ⇒ <code>Object</code>
@@ -47,6 +51,24 @@ Constant representing the type of bottom panel
 Constant representing the type of plugin panel
 
 **Kind**: static property of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+<a name="module_view/WorkspaceManager..$bottomPanelContainer"></a>
+
+### view/WorkspaceManager.$bottomPanelContainer : <code>jQueryObject</code>
+The single container wrapping all bottom panels
+
+**Kind**: inner property of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)
+<a name="module_view/WorkspaceManager..$statusBarPanelToggle"></a>
+
+### view/WorkspaceManager.$statusBarPanelToggle : <code>jQueryObject</code>
+Chevron toggle in the status bar
+
+**Kind**: inner property of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)
+<a name="module_view/WorkspaceManager.._statusBarToggleInProgress"></a>
+
+### view/WorkspaceManager.\_statusBarToggleInProgress : <code>boolean</code>
+True while the status bar toggle button is handling a click
+
+**Kind**: inner property of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)
 <a name="module_view/WorkspaceManager..EVENT_WORKSPACE_UPDATE_LAYOUT"></a>
 
 ### view/WorkspaceManager.EVENT\_WORKSPACE\_UPDATE\_LAYOUT
@@ -67,7 +89,7 @@ Event triggered when a panel is hidden.
 **Kind**: inner constant of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
 <a name="module_view/WorkspaceManager..createBottomPanel"></a>
 
-### view/WorkspaceManager.createBottomPanel(id, $panel, [minSize]) ⇒ <code>Panel</code>
+### view/WorkspaceManager.createBottomPanel(id, $panel, [minSize], [title]) ⇒ <code>Panel</code>
 Creates a new resizable panel beneath the editor area and above the status bar footer. Panel is initially invisible.
 The panel's size & visibility are automatically saved & restored as a view-state preference.
 
@@ -77,7 +99,20 @@ The panel's size & visibility are automatically saved & restored as a view-state
 | --- | --- | --- |
 | id | <code>string</code> | Unique id for this panel. Use package-style naming, e.g. "myextension.feature.panelname" |
 | $panel | <code>jQueryObject</code> | DOM content to use as the panel. Need not be in the document yet. Must have an id      attribute, for use as a preferences key. |
-| [minSize] | <code>number</code> | Minimum height of panel in px. |
+| [minSize] | <code>number</code> | @deprecated No longer used. Pass `undefined`. |
+| [title] | <code>string</code> | Display title shown in the bottom panel tab bar. |
+
+<a name="module_view/WorkspaceManager..destroyBottomPanel"></a>
+
+### view/WorkspaceManager.destroyBottomPanel(id)
+Destroys a bottom panel, removing it from internal registries, the tab bar, and the DOM.
+After calling this, the panel ID is no longer valid and the Panel instance should not be reused.
+
+**Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| id | <code>string</code> | The panel ID that was passed to createBottomPanel. |
 
 <a name="module_view/WorkspaceManager..createPluginPanel"></a>
 

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/command/Commands.js

@@ -541,6 +541,9 @@ define(function (require, exports, module) {
     /** Toggles the git panel */
     exports.CMD_GIT_TOGGLE_PANEL = "git-toggle-panel";
 
+    /** Toggles the custom snippets panel */
+    exports.CMD_CUSTOM_SNIPPETS_PANEL = "custom_snippets";
+
     /** Goes to next git change */
     exports.CMD_GIT_GOTO_NEXT_CHANGE = "git-gotoNextChange";
 

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) {