feat: better support for bottom panel tab bar title

Author: devvaannsh

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());
@@ -177,7 +177,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

@@ -1240,7 +1240,7 @@ 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]);

src/extensionsIntegrated/CustomSnippets/main.js

@@ -58,7 +58,8 @@ 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);
         customSnippetsPanel.show();
 
         // also register the handlers

src/extensionsIntegrated/DisplayShortcuts/main.js

@@ -478,7 +478,8 @@ define(function (require, exports, module) {
 
         // AppInit.htmlReady() has already executed before extensions are loaded
         // so, for now, we need to call this ourself
-        panel = WorkspaceManager.createBottomPanel(TOGGLE_SHORTCUTS_ID, $(s), 300);
+        panel = WorkspaceManager.createBottomPanel(TOGGLE_SHORTCUTS_ID, $(s), 300,
+            Strings.KEYBOARD_SHORTCUT_PANEL_TITLE);
         panel.hide();
 
         $shortcutsPanel = $("#shortcuts-panel");

src/features/FindReferencesManager.js

@@ -194,7 +194,8 @@ define(function (require, exports, module) {
             searchModel,
             "reference-in-files-results",
             "reference-in-files.results",
-            "reference"
+            "reference",
+            Strings.REFERENCES_PANEL_TITLE
         );
         if(_resultsView) {
             _resultsView

src/language/CodeInspection.js

@@ -1263,7 +1263,7 @@ define(function (require, exports, module) {
         Editor.registerGutter(CODE_INSPECTION_GUTTER, CODE_INSPECTION_GUTTER_PRIORITY);
         // Create bottom panel to list error details
         var panelHtml = Mustache.render(PanelTemplate, Strings);
-        problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100);
+        problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100, Strings.CMD_VIEW_TOGGLE_PROBLEMS);
         $problemsPanel = $("#problems-panel");
         $fixAllBtn = $problemsPanel.find(".problems-fix-all-btn");
         $fixAllBtn.click(()=>{

src/nls/root/strings.js

@@ -1249,6 +1249,8 @@ define({
     "REFERENCES_IN_FILES": "references",
     "REFERENCE_IN_FILES": "reference",
     "REFERENCES_NO_RESULTS": "No References available for current cursor position",
+    "REFERENCES_PANEL_TITLE": "References",
+    "SEARCH_RESULTS_PANEL_TITLE": "Search Results",
 
     "CMD_FIND_DOCUMENT_SYMBOLS": "Find Document Symbols",
     "CMD_FIND_PROJECT_SYMBOLS": "Find Project Symbols",
@@ -1396,6 +1398,7 @@ define({
     "BUTTON_CANCEL": "Cancel",
     "CHECKOUT_COMMIT": "Checkout",
     "CHECKOUT_COMMIT_DETAIL": "<b>Commit Message:</b> {0} <br><b>Commit hash:</b> {1}",
+    "GIT_PANEL_TITLE": "Git",
     "GIT_CLONE": "Clone",
     "BUTTON_CLOSE": "Close",
     "BUTTON_COMMIT": "Commit",

src/search/FindInFilesUI.js

@@ -536,7 +536,8 @@ define(function (require, exports, module) {
     // Initialize items dependent on HTML DOM
     AppInit.htmlReady(function () {
         var model = FindInFiles.searchModel;
-        _resultsView = new SearchResultsView(model, "find-in-files-results", "find-in-files.results");
+        _resultsView = new SearchResultsView(model, "find-in-files-results", "find-in-files.results",
+            undefined, Strings.SEARCH_RESULTS_PANEL_TITLE);
         _resultsView
             .on("replaceBatch", function () {
                 _finishReplaceBatch(model);

src/search/SearchResultsView.js

@@ -76,12 +76,13 @@ define(function (require, exports, module) {
      * @param {string} panelID The CSS ID to use for the panel.
      * @param {string} panelName The name to use for the panel, as passed to WorkspaceManager.createBottomPanel().
      * @param {string} type type to identify if it is reference search or string match serach
+     * @param {string=} title Display title for the panel tab.
      */
-    function SearchResultsView(model, panelID, panelName, type) {
+    function SearchResultsView(model, panelID, panelName, type, title) {
         const self = this;
         let panelHtml  = Mustache.render(searchPanelTemplate, {panelID: panelID});
 
-        this._panel    = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100);
+        this._panel    = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100, title);
         this._$summary = this._panel.$panel.find(".title");
         this._$table   = this._panel.$panel.find(".table-container");
         this._$previewEditor   = this._panel.$panel.find(".search-editor-preview");

src/view/WorkspaceManager.js

@@ -140,18 +140,6 @@ define(function (require, exports, module) {
     /** @type {Object} Map of panelID -> minSize for bottom panels */
     let _panelMinSizes = {};
 
-    /** Fallback title map for panels that don't have a .toolbar .title element */
-    const _KNOWN_PANEL_TITLES = {
-        "errors": "Problems",
-        "problems-panel": "Problems",
-        "search-results": "Search Results",
-        "find-in-files-results": "Search Results",
-        "references-panel": "References",
-        "git-panel": "Git",
-        "keyboard-shortcuts-panel": "Keyboard Shortcuts",
-        "custom-snippets-panel": "Custom Snippets",
-        "test-builder-panel": "Test Builder"
-    };
 
 
     /**
@@ -260,27 +248,17 @@ define(function (require, exports, module) {
 
     /**
      * Resolve the display title for a bottom panel tab.
-     * First looks for a .toolbar .title element within the panel DOM,
-     * then falls back to the _KNOWN_PANEL_TITLES map using the panel's DOM id.
+     * Uses the explicit title if provided, otherwise humanizes the panel id.
      * @param {string} id  The panel registration ID
-     * @param {jQueryObject} $panel  The panel's jQuery element
+     * @param {string=} title  Explicit title passed to createBottomPanel
      * @return {string}
      * @private
      */
-    function _getPanelTitle(id, $panel) {
-        let $titleEl = $panel.find(".toolbar .title");
-        if ($titleEl.length && $.trim($titleEl.text())) {
-            return $.trim($titleEl.text());
+    function _getPanelTitle(id, title) {
+        if (title) {
+            return title;
         }
-        let domId = $panel.attr("id") || "";
-        if (_KNOWN_PANEL_TITLES[domId]) {
-            return _KNOWN_PANEL_TITLES[domId];
-        }
-        if (_KNOWN_PANEL_TITLES[id]) {
-            return _KNOWN_PANEL_TITLES[id];
-        }
-        // Last resort: humanize the id
-        let label = (domId || id).replace(/[-_]/g, " ");
+        let label = id.replace(new RegExp("[-_.]", "g"), " ").split(" ")[0];
         return label.charAt(0).toUpperCase() + label.slice(1);
     }
 
@@ -301,7 +279,7 @@ define(function (require, exports, module) {
             if (!panel) {
                 return;
             }
-            let title = panel._tabTitle || _getPanelTitle(panelId, panel.$panel);
+            let title = panel._tabTitle || _getPanelTitle(panelId);
             let isActive = (panelId === _activeBottomPanelId);
             let $tab = $('<div class="bottom-panel-tab' + (isActive ? ' active' : '') + '" data-panel-id="' + panelId + '">' +
                 '<span class="bottom-panel-tab-title">' + $("<span>").text(title).html() + '</span>' +
@@ -368,9 +346,10 @@ define(function (require, exports, module) {
      * @param {!jQueryObject} $panel  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.
      * @param {number=} minSize  Minimum height of panel in px.
+     * @param {string=} title  Display title shown in the bottom panel tab bar.
      * @return {!Panel}
      */
-    function createBottomPanel(id, $panel, minSize) {
+    function createBottomPanel(id, $panel, minSize, title) {
         // Insert panel into the tabbed container instead of before #status-bar
         $bottomPanelContainer.append($panel);
         $panel.hide();
@@ -383,7 +362,7 @@ define(function (require, exports, module) {
         panelIDMap[id] = bottomPanel;
 
         // Cache the tab title at creation time
-        bottomPanel._tabTitle = _getPanelTitle(id, $panel);
+        bottomPanel._tabTitle = _getPanelTitle(id, title);
 
         // Do NOT call Resizer.makeResizable on individual panels.
         // The container handles resizing.