feat: exit design mode when opening tools panel, find-in-files, quick open, or git panel

Each of these surfaces mounts UI in a region that design mode has
collapsed away (the editor chrome or the bottom panel area), so
clicking into them while in design mode produced a broken layout.
Call the VIEW_TOGGLE_DESIGN_MODE command to exit first; the normal
command flow then renders correctly.

Each site includes a TODO noting the long-term desire: float the
panel / picker on top of the live preview so users can use these
features without leaving design mode.

Author: abose

src/extensions/default/Git/src/Main.js

@@ -49,7 +49,20 @@ define(function (require, exports) {
         Branch.init();
         CloseNotModified.init();
         // Attach events
-        $icon.on("click", Panel.toggle);
+        $icon.on("click", function () {
+            // Design mode collapses the editor and stretches live preview,
+            // which leaves no room for the git bottom panel. Exit design mode
+            // first so the panel has somewhere to render.
+            // TODO: make git panel float/overlay live preview so users can
+            // peek at git status without leaving design mode.
+            const WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+            const CommandManager = brackets.getModule("command/CommandManager");
+            const Commands = brackets.getModule("command/Commands");
+            if (WorkspaceManager.isInDesignMode()) {
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            }
+            Panel.toggle();
+        });
     }
 
     function _addRemoveItemInGitignore(selectedEntry, method) {

src/search/FindInFilesUI.js

@@ -191,6 +191,13 @@ define(function (require, exports, module) {
      */
     function _showFindBar(scope, showReplace) {
         FindUtils.notifySearchScopeChanged();
+        // Design mode hides the editor area where the find bar and results
+        // panel mount. Exit design mode first so the UI has somewhere to show.
+        // TODO: make Find in Files overlay the live preview cleanly so users
+        // can search without leaving design mode.
+        if (WorkspaceManager.isInDesignMode()) {
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        }
         // If the scope is a file with a custom viewer, then we
         // don't show find in files dialog.
         if (scope && !EditorManager.canOpenPath(scope.fullPath)) {

src/search/QuickOpen.js

@@ -43,6 +43,7 @@ define(function (require, exports, module) {
         ProjectManager = require("project/ProjectManager"),
         LanguageManager = require("language/LanguageManager"),
         FileSystemError = require("filesystem/FileSystemError"),
+        WorkspaceManager = require("view/WorkspaceManager"),
         ModalBar = require("widgets/ModalBar").ModalBar,
         QuickSearchField = require("search/QuickSearchField").QuickSearchField,
         StringMatch = require("utils/StringMatch"),
@@ -779,6 +780,14 @@ define(function (require, exports, module) {
     }
 
     function doFileSearch() {
+        // Design mode hides the editor area where Quick Open's modal bar and
+        // result interactions need to land. Exit design mode first so the user
+        // sees the picker on the normal editor chrome.
+        // TODO: allow Quick Open to float above the live preview so users can
+        // navigate without leaving design mode.
+        if (WorkspaceManager.isInDesignMode()) {
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        }
         beginSearch("", getCurrentEditorSelectedText());
     }
 

src/view/DefaultPanelView.js

@@ -182,6 +182,15 @@ define(function (require, exports, module) {
             .attr("title", Strings.BOTTOM_PANEL_DEFAULT_TITLE);
 
         $drawerBtn.on("click", function () {
+            // Design mode collapses the editor and stretches live preview, which
+            // leaves no room for the bottom tools panel. Exit design mode first
+            // so the panel has somewhere to go.
+            // TODO: revisit once the tools panel can float / overlay the live
+            // preview without disrupting it, so users can peek at tools without
+            // leaving design mode.
+            if (WorkspaceManager.isInDesignMode()) {
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            }
             if (_panel.isVisible()) {
                 _panel.hide();
             } else {