Add option in sidebar to toggle the visibility of working set and tab bar

src/command/Commands.js

@@ -451,6 +451,12 @@ define(function (require, exports, module) {
     /** Toggles automatic working set sorting */
     exports.CMD_WORKING_SORT_TOGGLE_AUTO  = "cmd.sortWorkingSetToggleAuto";  // WorkingSetSort.js       _handleToggleAutoSort()
 
+    /** Toggles working set visibility */
+    exports.CMD_TOGGLE_SHOW_WORKING_SET  = "cmd.toggleShowWorkingSet";      // SidebarView.js       _handleToggleWorkingSet()
+
+    /** Toggles file tabs visibility */
+    exports.CMD_TOGGLE_SHOW_FILE_TABS  = "cmd.toggleShowFileTabs";          // SidebarView.js       _handleToggleFileTabs()
+
     /** Opens keyboard navigation UI overlay */
     exports.CMD_KEYBOARD_NAV_UI_OVERLAY  = "cmd.keyboardNavUI";  // WorkingSetSort.js       _handleToggleAutoSort()
 

src/command/DefaultMenus.js

@@ -345,6 +345,9 @@ define(function (require, exports, module) {
         splitview_menu.addMenuDivider();
         splitview_menu.addMenuItem(Commands.CMD_WORKING_SORT_TOGGLE_AUTO);
         splitview_menu.addMenuItem(Commands.FILE_SHOW_FOLDERS_FIRST);
+        splitview_menu.addMenuDivider();
+        splitview_menu.addMenuItem(Commands.CMD_TOGGLE_SHOW_WORKING_SET);
+        splitview_menu.addMenuItem(Commands.CMD_TOGGLE_SHOW_FILE_TABS);
 
         var project_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.PROJECT_MENU);
         project_cmenu.addMenuItem(Commands.FILE_NEW);

src/nls/root/strings.js

@@ -328,6 +328,9 @@ define({
     "SPLITVIEW_MENU_TOOLTIP": "Split the editor vertically or horizontally",
     "GEAR_MENU_TOOLTIP": "Configure Working Set",
 
+    "CMD_TOGGLE_SHOW_WORKING_SET": "Show Working Set",
+    "CMD_TOGGLE_SHOW_FILE_TABS": "Show File Tab Bar",
+
     "SPLITVIEW_INFO_TITLE": "Already Open",
     "SPLITVIEW_MULTIPANE_WARNING": "The file is already open in another pane. {APP_NAME} will soon support opening the same file in more than one pane. Until then, the file will be shown in the pane it's already open in.<br /><br />(You'll only see this message once.)",
 
@@ -1279,6 +1282,9 @@ define({
     // Emmet
     "DESCRIPTION_EMMET": "true to enable Emmet, else false.",
 
+    // Hide/Show working set (that is displayed in the sidebar)
+    "DESCRIPTION_SHOW_WORKING_SET": "true to show the working set, false to hide it.",
+
     // Tabbar
     "DESCRIPTION_TABBAR": "Set the tab bar settings.",
     "DESCRIPTION_SHOW_TABBAR": "true to show the tab bar, else false.",

src/project/SidebarView.js

@@ -38,15 +38,16 @@
 define(function (require, exports, module) {
 
 
-    var AppInit         = require("utils/AppInit"),
-        ProjectManager  = require("project/ProjectManager"),
-        WorkingSetView  = require("project/WorkingSetView"),
-        MainViewManager = require("view/MainViewManager"),
-        CommandManager  = require("command/CommandManager"),
-        Commands        = require("command/Commands"),
-        Strings         = require("strings"),
-        Resizer         = require("utils/Resizer"),
-        _               = require("thirdparty/lodash");
+    var AppInit             = require("utils/AppInit"),
+        ProjectManager      = require("project/ProjectManager"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
+        WorkingSetView      = require("project/WorkingSetView"),
+        MainViewManager     = require("view/MainViewManager"),
+        CommandManager      = require("command/CommandManager"),
+        Commands            = require("command/Commands"),
+        Strings             = require("strings"),
+        Resizer             = require("utils/Resizer"),
+        _                   = require("thirdparty/lodash");
 
     // These vars are initialized by the htmlReady handler
     // below since they refer to DOM elements
@@ -58,7 +59,9 @@ define(function (require, exports, module) {
 
     var _cmdSplitNone,
         _cmdSplitVertical,
-        _cmdSplitHorizontal;
+        _cmdSplitHorizontal,
+        _cmdToggleWorkingSet,
+        _cmdToggleFileTabs;
 
     /**
      * @private
@@ -178,6 +181,30 @@ define(function (require, exports, module) {
         MainViewManager.setLayoutScheme(2, 1);
     }
 
+    /**
+     * Handle Toggle Working Set Command
+     * @private
+     */
+    function _handleToggleWorkingSet() {
+        const isCurrentlyShown = PreferencesManager.get("showWorkingSet");
+        PreferencesManager.set("showWorkingSet", !isCurrentlyShown);
+        CommandManager.get(Commands.CMD_TOGGLE_SHOW_WORKING_SET).setChecked(!isCurrentlyShown);
+    }
+
+    /**
+     * Handle Toggle File Tabs Command
+     * @private
+     */
+    function _handleToggleFileTabs() {
+        const prefs = PreferencesManager.get("tabBar.options");
+        const willBeShown = !prefs.showTabBar;
+        PreferencesManager.set("tabBar.options", {
+            showTabBar: willBeShown,
+            numberOfTabs: prefs.numberOfTabs
+        });
+        CommandManager.get(Commands.CMD_TOGGLE_SHOW_FILE_TABS).setChecked(willBeShown);
+    }
+
     // Initialize items dependent on HTML DOM
     AppInit.htmlReady(function () {
         $sidebar                  = $("#sidebar");
@@ -186,6 +213,12 @@ define(function (require, exports, module) {
         $projectFilesContainer    = $sidebar.find("#project-files-container");
         $workingSetViewsContainer = $sidebar.find("#working-set-list-container");
 
+        // apply working set visibility immediately
+        // this is needed because otherwise when the working set is hidden there is a flashing issue
+        if (!PreferencesManager.get("showWorkingSet")) {
+            $workingSetViewsContainer.addClass("working-set-hidden");
+        }
+
         // init
         $sidebar.on("panelResizeStart", function (evt, width) {
             $sidebar.find(".sidebar-selection-extension").css("display", "none");
@@ -244,6 +277,37 @@ define(function (require, exports, module) {
 
         // Tooltips
         $splitViewMenu.attr("title", Strings.GEAR_MENU_TOOLTIP);
+
+        _cmdToggleWorkingSet.setChecked(PreferencesManager.get("showWorkingSet"));
+        _cmdToggleFileTabs.setChecked(PreferencesManager.get("tabBar.options").showTabBar);
+
+        // to listen for tab bar preference changes from the preferences file
+        // because if user toggles the state of tab bar visibility either from the view menu or the preferences file
+        // we need to update the checked state here too
+        PreferencesManager.on("change", "tabBar.options", function () {
+            const prefs = PreferencesManager.get("tabBar.options");
+            _cmdToggleFileTabs.setChecked(prefs.showTabBar);
+        });
+
+        // Define the preference to decide whether to show the working set or not
+        PreferencesManager.definePreference("showWorkingSet", "boolean", true, {
+            description: Strings.DESCRIPTION_SHOW_WORKING_SET
+        })
+            .on("change", function () {
+                // 'working-set-list-container' is the id of the main working set element which we need to hide/show
+                const $workingSet = $(document.getElementById("working-set-list-container"));
+                const getPref = PreferencesManager.get("showWorkingSet");
+
+                if(getPref) {
+                    // refer to brackets.less file for styles
+                    $workingSet.removeClass("working-set-hidden");
+                } else {
+                    $workingSet.addClass("working-set-hidden");
+                }
+
+                // update the menu item checked state to match the preference
+                _cmdToggleWorkingSet.setChecked(getPref);
+            });
     });
 
     ProjectManager.on("projectOpen", _updateProjectTitle);
@@ -255,6 +319,8 @@ define(function (require, exports, module) {
     _cmdSplitNone       = CommandManager.register(Strings.CMD_SPLITVIEW_NONE,       Commands.CMD_SPLITVIEW_NONE,       _handleSplitViewNone);
     _cmdSplitVertical   = CommandManager.register(Strings.CMD_SPLITVIEW_VERTICAL,   Commands.CMD_SPLITVIEW_VERTICAL,   _handleSplitViewVertical);
     _cmdSplitHorizontal = CommandManager.register(Strings.CMD_SPLITVIEW_HORIZONTAL, Commands.CMD_SPLITVIEW_HORIZONTAL, _handleSplitViewHorizontal);
+    _cmdToggleWorkingSet = CommandManager.register(Strings.CMD_TOGGLE_SHOW_WORKING_SET, Commands.CMD_TOGGLE_SHOW_WORKING_SET, _handleToggleWorkingSet);
+    _cmdToggleFileTabs = CommandManager.register(Strings.CMD_TOGGLE_SHOW_FILE_TABS, Commands.CMD_TOGGLE_SHOW_FILE_TABS, _handleToggleFileTabs);
 
     CommandManager.register(Strings.CMD_TOGGLE_SIDEBAR, Commands.VIEW_HIDE_SIDEBAR, toggle);
     CommandManager.register(Strings.CMD_SHOW_SIDEBAR, Commands.SHOW_SIDEBAR, show);

src/styles/brackets.less

@@ -1168,12 +1168,17 @@ a, img {
 
 #working-set-list-container {
     background: @bc-sidebar-bg;
+    display: block;
 
     > div:last-child ul {
         padding-bottom: 21px; // Adds working set bottom padding to the last UL.
     }
 }
 
+#working-set-list-container.working-set-hidden {
+    display: none !important;
+}
+
 .working-set-header {
     position: relative;
     height: 19px;