feat: spotlight-style floating Quick Open for design mode

abose · abose · commit f7c997da6b97 · 2026-04-19T05:30:33.000Z
Quick Open's standard ModalBar mounts above #editor-holder, which is
collapsed in design mode — invoking the picker there would show no
UI. Add a ModalBar-compatible floating variant: when
WorkspaceManager.isInDesignMode() is true, showDialog creates a
centered overlay with a compact search bar instead. The picker stays
non-modal: no backdrop dim or blur so the live preview stays fully
visible and file switching never feels jarring.

- _createFloatingQuickOpenBar implements the bits of ModalBar that
  QuickOpen uses (on("close", ...), close(), prepareClose, getRoot)
  and returns a resolved jQuery Deferred from close() so callers
  chain .done() safely.
- Dropdown (appended to &lt;body&gt; by QuickSearchField) is anchored to
  the floating bar via the $positionEl option and bumped above the
  overlay's stacking so its rendering isn't dimmed.
- verticalAdjust is computed as (bar.bottom - input.bottom) so the
  dropdown sits flush with the bar instead of floating detached.
- Escape handling runs in capture phase on both the overlay and the
  document so one keypress dismisses both dropdown and picker at
  once instead of requiring two.
- setSearchFieldValue guards against a torn-down searchField so
  re-entering the command after a stale close doesn't throw.
- QuickOpen's own "exit design mode first" branch is removed — the
  floating picker replaces that workaround entirely.
diff --git a/src/search/QuickOpen.js b/src/search/QuickOpen.js
@@ -52,6 +52,88 @@ define(function (require, exports, module) {
     var _providerRegistrationHandler = new ProviderRegistrationHandler(),
         _registerQuickOpenProvider = _providerRegistrationHandler.registerProvider.bind(_providerRegistrationHandler);
 
+    /**
+     * Build a ModalBar-compatible stub that renders a Spotlight-style floating
+     * picker on top of the viewport (used while in design mode, since the
+     * standard ModalBar mounts into #editor-holder which is collapsed).
+     * Implements the small subset of the ModalBar API that QuickOpen relies on:
+     * `on("close", fn)`, `close()`, `prepareClose()`, and `getRoot()`.
+     * @private
+     */
+    function _createFloatingQuickOpenBar(templateHTML) {
+        const $overlay = $("<div class='quick-open-floating-overlay'/>");
+        const $bar = $("<div class='quick-open-floating-bar'/>").html(templateHTML);
+        $overlay.append($bar).appendTo("body");
+        const closeHandlers = [];
+        let closed = false;
+        function close() {
+            if (closed) { return closePromise; }
+            closed = true;
+            // QuickNavigateDialog.close() returns this.closePromise, which is
+            // the 3rd arg of the ModalBar "close" event payload. Pass a
+            // resolved jQuery Deferred so callers can chain .done() safely.
+            closePromise = $.Deferred().resolve().promise();
+            closeHandlers.forEach(function (fn) {
+                try {
+                    // Match ModalBar's trigger signature: event, reason, promise
+                    fn({}, undefined, closePromise);
+                } catch (e) { /* swallow */ }
+            });
+            $overlay.remove();
+            window.document.body.removeEventListener("focusin", onFocusIn, true);
+            return closePromise;
+        }
+        let closePromise = null;
+        function onFocusIn(e) {
+            // Close when focus moves outside both the bar and the results
+            // dropdown (which QuickSearchField appends to <body>, not into
+            // our overlay).
+            if ($overlay[0].contains(e.target)) { return; }
+            if (e.target.closest && e.target.closest(".quick-search-container")) { return; }
+            close();
+        }
+        const bar = {
+            on: function (evt, fn) {
+                if (evt === "close" && typeof fn === "function") {
+                    closeHandlers.push(fn);
+                }
+            },
+            prepareClose: function () { /* no-op — floating bar doesn't reserve editor space */ },
+            close: close,
+            getRoot: function () { return $bar; }
+        };
+        // Close the whole picker on the FIRST Escape rather than just the
+        // dropdown. Use capture so we run before QuickSearchField's keydown
+        // handler (which does internal dropdown dismiss handling) can
+        // consume the event.
+        function onEscape(e) {
+            if (e.key === "Escape" || e.keyCode === 27) {
+                close();
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.stopImmediatePropagation) { e.stopImmediatePropagation(); }
+            }
+        }
+        $overlay[0].addEventListener("keydown", onEscape, true);
+        // Global safety net: while overlay is up, first Escape anywhere closes it.
+        window.document.addEventListener("keydown", onEscape, true);
+        closeHandlers.push(function () {
+            window.document.removeEventListener("keydown", onEscape, true);
+        });
+        $overlay.on("mousedown", function (e) {
+            if (e.target === $overlay[0]) {
+                close();
+            }
+        });
+        window.document.body.addEventListener("focusin", onFocusIn, true);
+        // Move focus into the input once the overlay is in the DOM.
+        window.setTimeout(function () {
+            const $input = $bar.find("input").first();
+            if ($input.length) { $input.focus(); }
+        }, 0);
+        return bar;
+    }
+
     /**
      * Represents the symbol kind
      * @type {Object}
@@ -637,6 +719,14 @@ define(function (require, exports, module) {
         initialString = initialString || "";
         initialString = prefix + initialString;
 
+        // If the underlying search field was already torn down (e.g. the bar
+        // was closed via focus-loss but the isOpen flag wasn't updated in
+        // time), fall back to closing cleanly so the caller reopens fresh.
+        if (!this.searchField || !this.searchField.$input || !this.$searchField || !this.$searchField[0]) {
+            this.isOpen = false;
+            return;
+        }
+
         this.searchField.setText(initialString);
 
         // Select just the text after the prefix
@@ -707,17 +797,44 @@ define(function (require, exports, module) {
             placeholder='${Strings.CMD_QUICK_OPEN}\u2026' style='width: 30em'>
             <span class='find-dialog-label'></span>
         </div>`;
-        this.modalBar = new ModalBar(searchBarHTML, true);
+        // In design mode the editor area is collapsed and the normal ModalBar
+        // (which slides in before #editor-holder) has no room to render. Use a
+        // Spotlight-style floating overlay instead so the picker stays usable.
+        if (WorkspaceManager.isInDesignMode()) {
+            this.modalBar = _createFloatingQuickOpenBar(searchBarHTML);
+        } else {
+            this.modalBar = new ModalBar(searchBarHTML, true);
+        }
 
         this.modalBar.on("close", this._handleCloseBar);
 
         this.$searchField = $("input#quickOpenSearch");
         this.$indexingSpinner = $("#indexing-spinner");
 
+        const _floating = WorkspaceManager.isInDesignMode();
+        let _verticalAdjust = this.modalBar.getRoot().outerHeight();
+        if (_floating) {
+            // QuickSearchField computes dropdownTop as
+            //   input.offset().top + input.height + verticalAdjust
+            // For the standard ModalBar that lands flush with the bar's bottom
+            // because the input sits at the bar's bottom edge. In the floating
+            // bar the input is vertically centered inside, so `bar.height` as
+            // verticalAdjust overshoots and the dropdown floats detached. Use
+            // (bar.bottom - input.bottom) instead so the dropdown starts right
+            // below the bar.
+            const $root = this.modalBar.getRoot();
+            const barBottom = $root.offset().top + $root.outerHeight();
+            const inputBottom = this.$searchField.offset().top + this.$searchField.outerHeight();
+            _verticalAdjust = Math.max(0, barBottom - inputBottom);
+        }
         this.searchField = new QuickSearchField(this.$searchField, {
             maxResults: 20,
             firstHighlightIndex: 0,
-            verticalAdjust: this.modalBar.getRoot().outerHeight(),
+            verticalAdjust: _verticalAdjust,
+            // In design mode the floating bar is the visible container for the
+            // picker; align the results dropdown to that element instead of the
+            // bare <input> so the two edges match.
+            $positionEl: _floating ? this.modalBar.getRoot() : undefined,
             resultProvider: this._filterCallback,
             formatter: this._resultsFormatterCallback,
             onCommit: this._handleItemSelect,
@@ -780,14 +897,6 @@ 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());
     }
 
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -2734,6 +2734,96 @@ textarea.exclusions-editor {
     }
 }
 
+// Spotlight-style floating Quick Open picker used while in design mode, where
+// the standard ModalBar has no editor space to mount into.
+// No backdrop dim/blur — file switching is frequent and UI-wide visual
+// changes feel jarring. The overlay only exists to host the centered bar
+// and catch outside-clicks for dismiss.
+.quick-open-floating-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: @z-index-brackets-context-menu-base + 50;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 12vh;
+    background: transparent;
+    pointer-events: none;  // passthrough; the bar re-enables pointer events below
+}
+.quick-open-floating-bar {
+    width: 640px;
+    max-width: 90vw;
+    padding: 0;
+    background-color: @bc-panel-bg;
+    border: 1px solid @bc-panel-border;
+    border-radius: 10px 10px 0 0;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+    pointer-events: auto;  // re-enable inside the bar (overlay disables it for passthrough)
+    .dark & {
+        background-color: @dark-bc-panel-bg;
+        border-color: @dark-bc-panel-border;
+    }
+
+    // Input line
+    > div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 4px 14px;
+    }
+    input[type="text"] {
+        flex: 1 1 auto;
+        width: auto !important;
+        min-width: 0;
+        box-sizing: border-box;
+        height: 48px !important;
+        font-size: 18px;
+        line-height: 1.4;
+        padding: 10px 4px !important;
+        margin: 0 !important;
+        border: 0 !important;
+        outline: none !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        color: @bc-text;
+        .dark & {
+            color: @dark-bc-text;
+        }
+        &::placeholder {
+            color: @bc-text-quiet;
+            .dark & { color: @dark-bc-text-quiet; }
+        }
+    }
+    .indexing-group {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        flex: 0 0 auto;
+        order: -1;  // spinner before input
+    }
+    .find-dialog-label {
+        flex: 0 0 auto;
+        color: @bc-text-quiet;
+        font-size: 12px;
+        .dark & { color: @dark-bc-text-quiet; }
+    }
+}
+// While the floating Quick Open is up, anchor the results dropdown to the
+// floating bar (it's the one styled to contain it). The dropdown is appended
+// to <body> by QuickSearchField; constrain its max-height so it never
+// overflows the viewport, and lift its z-index above the overlay so the
+// overlay's backdrop-filter doesn't blur the dropdown too.
+body:has(.quick-open-floating-overlay) .quick-search-container {
+    z-index: @z-index-brackets-context-menu-base + 51;
+    max-height: 60vh;
+    overflow-y: auto;
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+}
+
 .quick-search-container {
     border: 1px solid @bc-panel-border;
     box-sizing: border-box;  // lets QuickSearchField size the width more nicely
