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

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

@@ -905,7 +905,7 @@
 <div class="main-view forced-hidden">
     <div id="notificationUIDefaultAnchor" href="#">
     </div>
-    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="30" data-maxsize="80%" data-forceleft=".content">
+    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
         <div id="mainNavBar">
             <div id="mainNavBarLeft">
                 <div id="newProject" class="new-project-btn btn-alt-quiet"></div>
@@ -949,10 +949,14 @@
         <div class="ccb-divider"></div>
         <div class="ccb-group ccb-group-edit">
             <a href="#" id="ccbUndoBtn" class="ccb-btn" title="Undo">
-                <i class="fa-solid fa-rotate-left"></i>
+                <svg class="ccb-edit-icon" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path fill="currentColor" d="M8.9502 2.33398L6.49219 4.79395L6.18945 5.0957H6.61719L11.4883 5.09766C14.2134 5.09841 15.5922 5.10134 16.4404 5.18164C16.8608 5.22144 17.1435 5.27977 17.3906 5.36328C17.6394 5.44739 17.8593 5.55885 18.1582 5.71582V5.7168C19.3778 6.35739 20.3334 7.45815 20.8584 8.83691C20.9639 9.11405 21.0196 9.29347 21.0508 9.5332C21.0828 9.77961 21.0898 10.094 21.0898 10.6416C21.0898 11.1889 21.0828 11.5027 21.0508 11.749C21.0274 11.929 20.9903 12.0752 20.9287 12.2539L20.8584 12.4463C20.5052 13.3739 20.0723 14.0292 19.3896 14.6748C18.9323 15.1075 18.3356 15.4867 17.7188 15.7578C17.1008 16.0294 16.4754 16.1874 15.9609 16.1875H15.7314V13.2285H15.8633C16.0644 13.2272 16.3978 13.1398 16.6211 13.0381C18.6414 12.1171 18.7461 9.33015 16.7764 8.33105L16.2627 8.07129L16.2256 8.05176H6.18945L6.49219 8.35449L8.9502 10.8145L11.1055 12.9707H6.68848L3.43262 9.71484L0.25 6.53125L3.43262 3.39648L6.6875 0.186523L9.0752 0.182617L11.1055 0.177734L8.9502 2.33398Z"/>
+                </svg>
             </a>
             <a href="#" id="ccbRedoBtn" class="ccb-btn" title="Redo">
-                <i class="fa-solid fa-rotate-right"></i>
+                <svg class="ccb-edit-icon" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path fill="currentColor" d="M12.3164 2.33398L14.7744 4.79395L15.0771 5.0957H14.6494L9.77832 5.09766C7.05319 5.09841 5.67443 5.10134 4.82617 5.18164C4.40582 5.22144 4.12312 5.27977 3.87598 5.36328C3.62717 5.44739 3.40726 5.55885 3.1084 5.71582V5.7168C1.88885 6.35739 0.933211 7.45815 0.408203 8.83691C0.302675 9.11405 0.247023 9.29347 0.21582 9.5332C0.183785 9.77961 0.176758 10.094 0.176758 10.6416C0.176759 11.1889 0.183829 11.5027 0.21582 11.749C0.239218 11.929 0.276306 12.0752 0.337891 12.2539L0.408203 12.4463C0.761384 13.3739 1.19432 14.0292 1.87695 14.6748C2.33434 15.1075 2.93102 15.4867 3.54785 15.7578C4.16581 16.0294 4.79116 16.1874 5.30566 16.1875H5.53516V13.2285H5.40332C5.20224 13.2272 4.86878 13.1398 4.64551 13.0381C2.62518 12.1171 2.52048 9.33015 4.49023 8.33105L5.00391 8.07129L5.04102 8.05176H15.0771L14.7744 8.35449L12.3164 10.8145L10.1611 12.9707H14.5781L17.834 9.71484L21.0166 6.53125L17.834 3.39648L14.5791 0.186523L12.1914 0.182617L10.1611 0.177734L12.3164 2.33398Z"/>
+                </svg>
             </a>
         </div>
         <div class="ccb-divider"></div>
@@ -964,11 +968,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,9 +73,9 @@
             pointer-events: none;
         }
 
-        svg.ccb-binoculars-icon {
+        svg.ccb-edit-icon {
             width: 15px;
-            height: 15px;
+            height: 11px;
             pointer-events: none;
         }
 

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/thirdparty/licences/credits.md

@@ -18,3 +18,6 @@ Please find all other licenses and attributions below:
 
 ### https://onehtmlpagechallenge.com/
 * For the code samples in starter projects
+
+### https://seekicon.com/author/mariusz-ostrowski
+* For the undo redo icons used in the editor

src/view/CentralControlBar.js

@@ -129,6 +129,9 @@ define(function (require, exports, module) {
         }
         $mainToolbar.css({ left: "", right: "", width: "" });
         $content.css({ width: "", "min-width": "", right: "", visibility: "", "pointer-events": "" });
+        // Snapshot the pre-collapse width before clearing it — we read it below to
+        // restore the toolbar to its original size when LP was already open.
+        const preCollapseToolbarWidth = savedToolbarWidth;
         savedToolbarWidth = null;
         livePreviewWasOpen = false;
         if (savedSidebarMaxSize !== null) {
@@ -151,7 +154,7 @@ define(function (require, exports, module) {
         // by the collapse action, fall back to the default panel size so it stays
         // visibly open at a reasonable width.
         const defaultWidth = Math.floor(window.innerWidth / 2.5);
-        let targetWidth = (savedToolbarWidth && savedToolbarWidth > 50) ? savedToolbarWidth : defaultWidth;
+        let targetWidth = (preCollapseToolbarWidth && preCollapseToolbarWidth > 50) ? preCollapseToolbarWidth : defaultWidth;
         // If the sidebar was resized larger while collapsed (e.g. to fill most of
         // the screen), restoring the pre-collapse live-preview width would push
         // main-toolbar back under the sidebar. Clamp so sidebar + CCB + a
@@ -261,10 +264,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 +287,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");