revert: move back/forward, show-in-tree, search buttons to mainNavBar

User feedback indicated the old position (top-right of the sidebar nav)
was better than the relocated positions inside the central control bar
and the sidebar project-files-header. Restore the four divs in
#mainNavBarRight with their original sprite-icon classes, drop the CCB
.ccb-group-nav block and the sidebar-hover #show-in-file-tree button,
and prune the CSS overrides that were added to host the buttons in the
CCB. NavigationProvider wiring is unchanged — it still attaches to
these IDs.

Tests:
- Move #showInfileTree and #searchNav click-dispatch tests to the
  NavigationAndHistory integ suite.
- Add a scroll-to-selected test in SidebarTabs-integ-test for
  handleShowInTree's post-showInTree ViewUtils.scrollElementIntoView
  (previously uncovered).
- Drop the obsolete CCB-side button tests.

Author: abose

src/extensionsIntegrated/CollapseFolders/main.js

@@ -18,21 +18,14 @@
  *
  */
 
-/* Displays sidebar-hover action buttons: "show in file tree" (binoculars) and
- * "collapse all folders" (stacked chevrons). Both appear on sidebar hover so the
- * sidebar stays visually quiet when the user isn't interacting with it. */
-/* Styling for both buttons is done in `../../styles/Extn-CollapseFolders.less` */
+/* Displays a Collapse button in the sidebar area */
+/* when the button gets clicked, it closes all the directories recursively that are opened */
+/* Styling for the button is done in `../../styles/Extn-CollapseFolders.less` */
 define(function (require, exports, module) {
     const AppInit = require("utils/AppInit");
-    const CommandManager = require("command/CommandManager");
-    const Commands = require("command/Commands");
     const ProjectManager = require("project/ProjectManager");
     const Strings = require("strings");
 
-    const SHOW_IN_TREE_SVG = '<svg class="show-in-tree-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
-        '<path fill="currentColor" d="M4.5 1A1.5 1.5 0 0 0 3 2.5V3h4v-.5A1.5 1.5 0 0 0 5.5 1h-1zM7 4v1h2V4h4v.882a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V13H9v-1.5a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5V13H1V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V4h4zM1 14v.5A1.5 1.5 0 0 0 2.5 16h3A1.5 1.5 0 0 0 7 14.5V14H1zm8 0v.5a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V14H9zm4-11H9v-.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5V3z"/>' +
-        '</svg>';
-
     /**
      * This is the main function that handles the closing of all the directories
      */
@@ -59,37 +52,30 @@ define(function (require, exports, module) {
         }
     }
 
-    function _handleShowInTreeClick() {
-        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-    }
-
     /**
-     * Append the sidebar hover actions: a "Show in File Tree" binoculars button
-     * followed by the "Collapse All" chevron button. Both live in
-     * #project-files-header and become visible only on #sidebar:hover.
+     * This function is responsible to create the 'Collapse All' button
+     * and append it to the sidebar area on the project-files-header
      */
-    function createSidebarHoverButtons() {
+    function createCollapseButton() {
         const $projectFilesHeader = $("#project-files-header");
+        // make sure that we were able to get the project-files-header DOM element
         if ($projectFilesHeader.length === 0) {
             return;
         }
 
-        const $showInTreeBtn = $('<div id="show-in-file-tree" class="btn-alt-quiet" title="' +
-            Strings.CMD_SHOW_IN_TREE + '">' + SHOW_IN_TREE_SVG + '</div>');
-        $showInTreeBtn.on("click", _handleShowInTreeClick);
-        $projectFilesHeader.append($showInTreeBtn);
-
+        // create the collapse btn
         const $collapseBtn = $(`
             <div id="collapse-folders" class="btn-alt-quiet" title="${Strings.COLLAPSE_ALL_FOLDERS}">
                 <i class="fa-solid fa-chevron-down collapse-icon" aria-hidden="true"></i>
                 <i class="fa-solid fa-chevron-up collapse-icon" aria-hidden="true"></i>
             </div>
         `);
+
         $collapseBtn.on("click", handleCollapseBtnClick);
-        $projectFilesHeader.append($collapseBtn);
+        $projectFilesHeader.append($collapseBtn); // append the btn to the project-files-header
     }
 
     AppInit.appReady(function () {
-        createSidebarHoverButtons();
+        createCollapseButton();
     });
 });

src/index.html

@@ -914,6 +914,10 @@
                 <a id="phcode-io-main-nav" href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a>
             </div>
             <div id="mainNavBarRight">
+                <div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
+                <div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
+                <div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
+                <div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
                 <div class="working-set-splitview-btn btn-alt-quiet"></div>
             </div>
         </div>
@@ -965,12 +969,6 @@
                 <i class="fa-solid fa-floppy-disk"></i>
             </a>
         </div>
-        <div class="ccb-divider"></div>
-        <div class="ccb-group ccb-group-nav">
-            <a href="#" id="searchNav" class="ccb-btn"><i class="fa-solid fa-magnifying-glass"></i></a>
-            <a href="#" id="navBackButton" class="ccb-btn"><i class="fa-solid fa-arrow-left"></i></a>
-            <a href="#" id="navForwardButton" class="ccb-btn"><i class="fa-solid fa-arrow-right"></i></a>
-        </div>
     </div>
 
     <!--

src/styles/CentralControlBar.less

@@ -107,25 +107,6 @@
         }
     }
 
-    /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */
-    #searchNav,
-    #navBackButton,
-    #navForwardButton {
-        background: transparent !important;
-        top: auto !important;
-        padding: 0 !important;
-        width: auto !important;
-        height: 28px !important;
-        content: normal !important;
-        opacity: 1;
-    }
-
-    #navBackButton.nav-back-btn-disabled,
-    #navForwardButton.nav-forward-btn-disabled {
-        opacity: 0.35;
-        pointer-events: none;
-    }
-
 }
 
 /* Editor collapse: actual layout handled in JS via .content width/visibility */

src/styles/Extn-CollapseFolders.less

@@ -1,42 +1,25 @@
-#collapse-folders,
-#show-in-file-tree {
+#collapse-folders {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 0.2em 0.65em;
     margin-top: 0.1em;
     position: absolute !important;
+    right: 0;
     opacity: 0;
     visibility: hidden;
     transition:
         opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out;
-}
-
-#collapse-folders {
-    flex-direction: column;
-    right: 0;
 
     .collapse-icon {
         font-size: 0.5em;
         line-height: 1;
     }
 }
 
-#show-in-file-tree {
-    // Sit to the left of #collapse-folders.
-    right: 24px;
-
-    .show-in-tree-icon {
-        // Sized to match the combined stacked-chevron glyph of #collapse-folders.
-        width: 11px;
-        height: 11px;
-        pointer-events: none;
-    }
-}
-
-#sidebar:hover #collapse-folders,
-#sidebar:hover #show-in-file-tree {
+#sidebar:hover #collapse-folders {
     opacity: 1;
     visibility: visible;
 }

test/spec/CentralControlBar-integ-test.js

@@ -246,14 +246,6 @@ define(function (require, exports, module) {
                 expect(executed).toContain(Commands.FILE_SAVE);
             });
 
-            it("should trigger CMD_FIND_IN_FILES when the search button is clicked", function () {
-                const executed = recordCommands(function () {
-                    _$("#searchNav").trigger("click");
-                });
-                // searchNav routes through NavigationProvider._findInFiles which dispatches CMD_FIND_IN_FILES.
-                expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
-            });
-
             it("should execute VIEW_HIDE_SIDEBAR when #ccbSidebarToggleBtn is clicked, and the sidebar's visibility actually flips", async function () {
                 // Measure the effect: sidebar is visible → click → sidebar hides.
                 expect(SidebarView.isVisible()).toBe(true);
@@ -300,25 +292,6 @@ define(function (require, exports, module) {
             });
         });
 
-        describe("2a. #show-in-file-tree button in sidebar", function () {
-
-            it("should render #show-in-file-tree inside #project-files-header, before #collapse-folders, with the localized title", function () {
-                const $btn = _$("#show-in-file-tree");
-                expect($btn.length).toBe(1);
-                expect($btn.parent().attr("id")).toBe("project-files-header");
-                // #collapse-folders sits after #show-in-file-tree in DOM order.
-                expect($btn.nextAll("#collapse-folders").length).toBe(1);
-                expect($btn.attr("title")).toBe(Strings.CMD_SHOW_IN_TREE);
-            });
-
-            it("should execute NAVIGATE_SHOW_IN_FILE_TREE when #show-in-file-tree is clicked", function () {
-                const executed = recordCommands(function () {
-                    _$("#show-in-file-tree").trigger("click");
-                });
-                expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-            });
-        });
-
         describe("3. Toggle Design Mode command", function () {
 
             it("should execute VIEW_TOGGLE_DESIGN_MODE and flip isInDesignMode() from false to true and back", async function () {

test/spec/Extn-NavigationAndHistory-integ-test.js

@@ -344,6 +344,37 @@ define(function (require, exports, module) {
             await _expectNavButton(false, true, "nav forward disabled due to new file open");
         }
 
+        function recordCommands(fn) {
+            const executed = [];
+            const handler = function (event, id) { executed.push(id); };
+            CommandManager.on(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
+            try {
+                fn();
+            } finally {
+                CommandManager.off(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
+            }
+            return executed;
+        }
+
+        it("Should dispatch NAVIGATE_SHOW_IN_FILE_TREE when #showInfileTree is clicked", async function () {
+            await openFile("test.css");
+            const $btn = $("#showInfileTree");
+            expect($btn.length).toBe(1);
+            const executed = recordCommands(function () {
+                $btn.trigger("click");
+            });
+            expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+        }, 15000);
+
+        it("Should dispatch CMD_FIND_IN_FILES when #searchNav is clicked", function () {
+            const $btn = $("#searchNav");
+            expect($btn.length).toBe(1);
+            const executed = recordCommands(function () {
+                $btn.trigger("click");
+            });
+            expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
+        }, 15000);
+
         it("Should navigate back and forward between text files", async function () {
             await navigateResetStack();
             await _validateNavForFiles("test.css", "test.html", "test.js");

test/spec/SidebarTabs-integ-test.js

@@ -506,6 +506,52 @@ define(function (require, exports, module) {
 
                 expect(SidebarTabs.getActiveTab()).toBe(SidebarTabs.SIDEBAR_TAB_FILES);
             });
+
+            it("should scroll the selected tree node into view when re-invoked on an already-selected file", async function () {
+                // FileTreeView only auto-scrolls on unselected→selected transitions,
+                // so re-invoking NAVIGATE_SHOW_IN_FILE_TREE on an already-selected
+                // file would otherwise be a no-op when the user has scrolled away.
+                // handleShowInTree compensates by calling ViewUtils.scrollElementIntoView
+                // after ProjectManager.showInTree resolves — this asserts that call fires.
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["test.js"]),
+                    "open test file"
+                );
+                // First invocation: sets up the selection. We don't spy here because
+                // FileTreeView's own selection-transition scroll can also fire and we
+                // want to isolate the explicit handleShowInTree scroll.
+                await awaitsForDone(
+                    CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE),
+                    "first show in file tree"
+                );
+
+                const ViewUtils = testWindow.brackets.getModule("utils/ViewUtils");
+                const originalScroll = ViewUtils.scrollElementIntoView;
+                const calls = [];
+                ViewUtils.scrollElementIntoView = function ($container, $element, scrollIntoView) {
+                    calls.push({
+                        containerId: $container && $container.attr && $container.attr("id"),
+                        hasSelectedNode: $element && $element.length > 0
+                    });
+                    return originalScroll.apply(this, arguments);
+                };
+                try {
+                    await awaitsForDone(
+                        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE),
+                        "re-invoke show in file tree"
+                    );
+                    // The selection-transition scroll in FileTreeView.componentDidUpdate
+                    // cannot fire here (file is already selected), so any scroll call
+                    // against #project-files-container must come from handleShowInTree.
+                    await awaitsFor(function () {
+                        return calls.some(function (c) {
+                            return c.containerId === "project-files-container" && c.hasSelectedNode;
+                        });
+                    }, "ViewUtils.scrollElementIntoView to be called with the selected tree node", 3000);
+                } finally {
+                    ViewUtils.scrollElementIntoView = originalScroll;
+                }
+            });
         });
 
         describe("SidebarView resize", function () {