feat: move Show-in-File-Tree into sidebar + always scroll-to-selected

- Replace the CCB file-label block with a hover-only binoculars button in
  the sidebar's #project-files-header, next to #collapse-folders. The
  file name was redundant with the live-preview heading and file tabs.
- Merge the new button into the existing CollapseFolders extension so
  the two hover-revealed sidebar actions share a single owner and stylesheet.
- DocumentCommandHandlers.handleShowInTree: after ProjectManager.showInTree
  resolves, scroll the selected tree node into view. Previously the
  auto-scroll in FileTreeView only fired on unselected→selected
  transitions, so re-invoking the command on an already-selected file
  was a no-op when the user had scrolled away.
- Add mainview:CentralControlBar integ-test suite covering layout, CCB
  buttons, and the new sidebar hover button, using CommandManager's
  beforeExecuteCommand event instead of spies.

Author: abose

src/document/DocumentCommandHandlers.js

@@ -54,6 +54,7 @@ define(function (require, exports, module) {
         Menus               = require("command/Menus"),
         UrlParams           = require("utils/UrlParams").UrlParams,
         StatusBar           = require("widgets/StatusBar"),
+        ViewUtils           = require("utils/ViewUtils"),
         WorkspaceManager    = require("view/WorkspaceManager"),
         LanguageManager     = require("language/LanguageManager"),
         NewFileContentManager     = require("features/NewFileContentManager"),
@@ -1957,7 +1958,16 @@ define(function (require, exports, module) {
                 CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
             }
             SidebarTabs.setActiveTab(SidebarTabs.SIDEBAR_TAB_FILES);
-            ProjectManager.showInTree(activeFile);
+            // FileTreeView only auto-scrolls when the selection flips unselected→selected.
+            // Re-invoking the command on an already-selected file would otherwise be a
+            // no-op when the user has scrolled away — force-scroll the selected node
+            // into view so "Show in File Tree" always reveals the row.
+            ProjectManager.showInTree(activeFile).always(function () {
+                const $selected = $("#project-files-container .selected-node").first();
+                if ($selected.length) {
+                    ViewUtils.scrollElementIntoView($("#project-files-container"), $selected, true);
+                }
+            });
         }
     }
 

src/extensionsIntegrated/CollapseFolders/main.js

@@ -18,14 +18,21 @@
  *
  */
 
-/* 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` */
+/* 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` */
 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
      */
@@ -52,30 +59,37 @@ define(function (require, exports, module) {
         }
     }
 
+    function _handleShowInTreeClick() {
+        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+    }
+
     /**
-     * This function is responsible to create the 'Collapse All' button
-     * and append it to the sidebar area on the project-files-header
+     * 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.
      */
-    function createCollapseButton() {
+    function createSidebarHoverButtons() {
         const $projectFilesHeader = $("#project-files-header");
-        // make sure that we were able to get the project-files-header DOM element
         if ($projectFilesHeader.length === 0) {
             return;
         }
 
-        // create the collapse btn
+        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);
+
         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); // append the btn to the project-files-header
+        $projectFilesHeader.append($collapseBtn);
     }
 
     AppInit.appReady(function () {
-        createCollapseButton();
+        createSidebarHoverButtons();
     });
 });

src/index.html

@@ -964,11 +964,6 @@
         <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="ccbShowInTreeBtn" class="ccb-btn" title="Show in File Tree">
-                <svg class="ccb-binoculars-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>
-            </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>

src/styles/CentralControlBar.less

@@ -73,12 +73,6 @@
             pointer-events: none;
         }
 
-        svg.ccb-binoculars-icon {
-            width: 15px;
-            height: 15px;
-            pointer-events: none;
-        }
-
         &:hover {
             color: @project-panel-text-1;
             background-color: rgba(255, 255, 255, 0.08);

src/styles/Extn-CollapseFolders.less

@@ -1,25 +1,42 @@
-#collapse-folders {
+#collapse-folders,
+#show-in-file-tree {
     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;
     }
 }
 
-#sidebar:hover #collapse-folders {
+#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 {
     opacity: 1;
     visibility: visible;
 }

src/view/CentralControlBar.js

@@ -261,10 +261,6 @@ define(function (require, exports, module) {
             e.preventDefault();
             _executeCmd(Commands.VIEW_HIDE_SIDEBAR);
         });
-        $("#ccbShowInTreeBtn").on("click", function (e) {
-            e.preventDefault();
-            _executeCmd(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-        });
     }
 
     const _toggleDesignModeCommand = CommandManager.register(Strings.CMD_TOGGLE_DESIGN_MODE,
@@ -288,7 +284,6 @@ define(function (require, exports, module) {
         // navForwardButton get their localized titles from NavigationProvider.)
         $("#ccbCollapseEditorBtn").attr("title", Strings.CCB_SWITCH_TO_DESIGN_MODE);
         $("#ccbSidebarToggleBtn").attr("title", Strings.CMD_TOGGLE_SIDEBAR);
-        $("#ccbShowInTreeBtn").attr("title", Strings.CMD_SHOW_IN_TREE);
         $("#ccbUndoBtn").attr("title", Strings.CMD_UNDO);
         $("#ccbRedoBtn").attr("title", Strings.CMD_REDO);
         $("#ccbSaveBtn").attr("title", Strings.CMD_FILE_SAVE);

test/UnitTestSuite.js

@@ -92,6 +92,7 @@ define(function (require, exports, module) {
     require("spec/ExtensionUtils-integ-test");
     require("spec/InlineEditorProviders-integ-test");
     require("spec/PreferencesManager-integ-test");
+    require("spec/CentralControlBar-integ-test");
     require("spec/MainViewFactory-integ-test");
     require("spec/MainViewManager-integ-test");
     require("spec/SidebarTabs-integ-test");

test/control-bar-tests-todo.md

@@ -33,29 +33,30 @@ Keep this file updated as we add coverage; remove lines as suites land.
 - [ ] `#ccbSidebarToggleBtn` executes `VIEW_HIDE_SIDEBAR` and the icon flips
       `fa-angles-left` ↔ `fa-angles-right` on panelCollapsed/panelExpanded.
 - [ ] The old `#sidebar-toggle-btn` in the menubar is NOT in the DOM.
-- [ ] `#ccbShowInTreeBtn` is rendered in `.ccb-group-nav` directly below
-      `#searchNav` and has a `title` of `Strings.CMD_SHOW_IN_TREE`.
-- [ ] Clicking `#ccbShowInTreeBtn` executes `NAVIGATE_SHOW_IN_FILE_TREE` (if
-      sidebar was hidden, it re-opens as part of the command).
-- [ ] Binoculars `<svg>` renders and inherits `.ccb-btn` color
-      (`currentColor` on the path).
-- [ ] Neither `#ccbFileLabel`, `.ccb-group-file`, `.ccb-file-label`,
-      `.ccb-file-name`, nor `.ccb-file-dot` exists in the DOM or in the
-      compiled CSS.
+- [ ] `.ccb-group-nav` holds exactly `searchNav`, `navBackButton`,
+      `navForwardButton` — no show-in-tree button lives in the CCB.
+
+## 2a. #show-in-file-tree button (sidebar)
+
+- [ ] `#show-in-file-tree` is a child of `#project-files-header` and sits
+      before `#collapse-folders` in DOM order. Title equals
+      `Strings.CMD_SHOW_IN_TREE`.
+- [ ] Binoculars `<svg>` uses `fill="currentColor"` so the glyph tracks the
+      sidebar text color.
+- [ ] Button is hidden by default (`opacity: 0`, `visibility: hidden`) and
+      only shows on `#sidebar:hover`, matching the `#collapse-folders`
+      affordance.
+- [ ] Clicking `#show-in-file-tree` executes `NAVIGATE_SHOW_IN_FILE_TREE`.
 
 ## 3. Toggle Design Mode command
 
 - [ ] `Commands.VIEW_TOGGLE_DESIGN_MODE === "view.toggleDesignMode"` is
       registered at module load, visible via `CommandManager.get`.
-- [ ] Default keybinding: `Ctrl-F11` (from `base-config/keyboard.json`).
-- [ ] File menu has "Toggle Design Mode" directly below "Live Preview" and
-      above "Reload Live Preview".
 - [ ] Command's checked state mirrors `WorkspaceManager.isInDesignMode()` on
       both entry and exit.
-- [ ] Clicking `#ccbCollapseEditorBtn` routes through the command
-      (verify via a spy on `CommandManager.execute`).
-- [ ] Icon swap: `fa-feather` (expanded) ↔ `fa-code` (design mode). Title
-      swap: "Switch to Visual Edit" ↔ "Switch to Code Editor".
+- [ ] Clicking `#ccbCollapseEditorBtn`toggles design mode
+- [ ] Icon swap: `pen-nib svg` (expanded) ↔ `fa-code` (design mode). Title
+      swap: "Switch to desin mode" ↔ "Switch to Code Editor".(please see the exact string to check.)
 
 ## 4. Enter design mode