diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js index 7292015592..03ad037734 100644 --- a/src/document/DocumentCommandHandlers.js +++ b/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); + } + }); } } diff --git a/src/extensionsIntegrated/CollapseFolders/main.js b/src/extensionsIntegrated/CollapseFolders/main.js index f01ef52994..541d79537c 100644 --- a/src/extensionsIntegrated/CollapseFolders/main.js +++ b/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 = ''; + /** * 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 = $('
' + SHOW_IN_TREE_SVG + '
'); + $showInTreeBtn.on("click", _handleShowInTreeClick); + $projectFilesHeader.append($showInTreeBtn); + const $collapseBtn = $(`
`); - $collapseBtn.on("click", handleCollapseBtnClick); - $projectFilesHeader.append($collapseBtn); // append the btn to the project-files-header + $projectFilesHeader.append($collapseBtn); } AppInit.appReady(function () { - createCollapseButton(); + createSidebarHoverButtons(); }); }); diff --git a/src/index.html b/src/index.html index a29e28d7f3..d196537d80 100644 --- a/src/index.html +++ b/src/index.html @@ -905,7 +905,7 @@
-