test(mainview): load a real project and cover Quick Open design-mode behaviour

- Top-level beforeAll now loads /spec/QuickOpen-test-files so every
  CCB suite runs against a populated project tree.
- Add four Quick Open tests under "11b. Auto-exit ..." covering the
  design-mode Spotlight variant: floating bar shows up and the search
  field lives inside .quick-open-floating-bar (not a ModalBar);
  dropdown lists project files without any query; typing "somelines"
  filters the list so the other file drops out; pressing Enter opens
  the selected file.
- Harden the section-11b afterEach to actually close find-in-files
  and quick-open bars (native keyboard event + awaitsFor on removal)
  so no leftover .modal-bar leaks into later tests.

Author: abose

test/control-bar-tests-todo.md

@@ -10,55 +10,6 @@ describe("mainview: central control bar + design mode", function () { … });
 Keep this file updated as we add coverage; remove lines as suites land.
 
 ---
-
-## 10. `WorkspaceManager.setPluginPanelWidth` in design mode
-
-- [ ] Setting width W while collapsed resizes the sidebar to
-      `window - W - pluginIcons - 30 (CCB)` (clamped to ≥ 0) and derives
-      main-toolbar width accordingly.
-- [ ] Setting width W in normal mode falls through to the original
-      implementation (which clamps against 75% window / `window - sidebar
-      - 100`).
-
-## 11. Cycle stability
-
-- [ ] Enter design → drag sidebar past cap → exit → re-enter: CCB,
-      main-toolbar, sidebar all end up aligned (`ccb.left === sidebar.right`,
-      `mainToolbar.left === sidebar.right + 30`).
-- [ ] After the cycle, `sidebar.style.width === sidebar.offsetWidth + "px"`
-      (pinned at the capped value, not the uncapped Resizer value).
-- [ ] Toggle back to normal mode preserves live preview (panel stays open
-      at `savedToolbarWidth` or the default).
-
-## 11b. Auto-exit design mode from conflicting surfaces
-
-Each of these invocations must exit design mode before running its
-own behavior. Verify `WorkspaceManager.isInDesignMode()` is `true`
-pre-action, then `false` post-action, and that the feature's UI
-renders on the normal editor chrome (not a blank / broken region).
-
-- [ ] Clicking `#app-drawer-button` while in design mode exits design
-      mode, then toggles the default (tools) bottom panel.
-- [ ] Running `Commands.CMD_FIND_IN_FILES` while in design mode exits
-      design mode before the find bar / results panel mount.
-- [ ] Running `Commands.NAVIGATE_QUICK_OPEN` while in design mode
-      exits design mode before Quick Open's modal bar is shown.
-- [ ] Clicking `#git-toolbar-icon` while in design mode exits design
-      mode, then `Panel.toggle()` opens/closes the git panel.
-- [ ] In the above four cases, when NOT in design mode the auto-exit
-      branch is skipped and the original behavior runs unchanged.
-
-Future follow-ups (no tests yet — track as TODOs alongside the site
-comments added in the source files):
-
-- [ ] Tools panel floats over live preview so users can peek without
-      leaving design mode.
-- [ ] Find in Files renders an overlay modal bar and a floating
-      results surface compatible with design mode.
-- [ ] Quick Open gets a spotlight-style floating picker usable in
-      design mode.
-- [ ] Git panel gains a floating variant for design mode.
-
 ## 12. Integration with NoDistractions
 
 - [ ] Design mode + toggling `noDistractions` preference to `true`:

test/spec/CentralControlBar-integ-test.js

@@ -46,6 +46,12 @@ define(function (require, exports, module) {
             SidebarView = brackets.test.SidebarView;
             WorkspaceManager = brackets.test.WorkspaceManager;
             _$ = testWindow.$;
+            // Load a real project with some files so anything that depends on a
+            // populated project tree / file index (e.g. Quick Open's file picker)
+            // has something to list. QuickOpen-test-files has a couple of html
+            // files which are enough for the assertions here.
+            await SpecRunnerUtils.loadProjectInTestWindow(
+                SpecRunnerUtils.getTestPath("/spec/QuickOpen-test-files"));
         }, 30000);
 
         afterAll(async function () {
@@ -899,18 +905,22 @@ define(function (require, exports, module) {
 
             afterEach(async function () {
                 await hideToolsPanelIfVisible();
-                // Close any modal find/quick-open bars left open.
-                if (_$("#find-what").length) {
-                    _$(testWindow.document).trigger(
-                        _$.Event("keydown", { keyCode: 27 /* Esc */ })
-                    );
+                // Close any modal find / quick-open bars left open so the next
+                // test starts with a clean DOM.
+                const findInput = _$("#find-what")[0];
+                if (findInput) {
+                    findInput.dispatchEvent(new testWindow.KeyboardEvent("keydown",
+                        { keyCode: 27 /* Esc */, bubbles: true }));
+                    await awaitsFor(function () { return _$("#find-what").length === 0; },
+                        "find-in-files bar to close", 3000);
                 }
-                if (_$("input#quickOpenSearch").length) {
-                    _$(testWindow.document).trigger(
-                        _$.Event("keydown", { keyCode: 27 })
-                    );
+                const qoInput = _$("input#quickOpenSearch")[0];
+                if (qoInput) {
+                    qoInput.dispatchEvent(new testWindow.KeyboardEvent("keydown",
+                        { keyCode: 27, bubbles: true }));
+                    await awaitsFor(function () { return _$("input#quickOpenSearch").length === 0; },
+                        "quick-open bar to close", 3000);
                 }
-                await awaits(0);
             });
 
             it("should exit design mode and open the tools bottom panel when #app-drawer-button is clicked in design mode", async function () {
@@ -947,26 +957,115 @@ define(function (require, exports, module) {
                     "find-in-files bar to mount", 3000);
             });
 
-            it("should stay in design mode and show a floating Quick Open bar when invoked in design mode", async function () {
-                await enterDesignMode();
-                expect(WorkspaceManager.isInDesignMode()).toBe(true);
+            describe("Quick Open in design mode", function () {
+                // Quick Open has a dedicated design-mode variant (Spotlight-style
+                // floating overlay) instead of the usual ModalBar, so we cover its
+                // core user-facing behaviours here: bar shows up, dropdown lists
+                // project files, typing filters the list, pressing Enter opens
+                // the selected file.
+
+                function $bar() { return _$(".quick-open-floating-bar"); }
+                function $search() { return _$("input#quickOpenSearch"); }
+                function $dropdownItems() { return _$(".quick-search-container li"); }
+
+                async function openQuickOpenInDesignMode() {
+                    await enterDesignMode();
+                    CommandManager.execute(Commands.NAVIGATE_QUICK_OPEN);
+                    await awaitsFor(function () { return $bar().length > 0; },
+                        "floating Quick Open bar to appear", 3000);
+                    await awaitsFor(function () { return $search().length > 0; },
+                        "Quick Open search input to exist", 2000);
+                }
 
-                CommandManager.execute(Commands.NAVIGATE_QUICK_OPEN);
+                async function typeInSearch(text) {
+                    $search().val(text);
+                    $search().trigger("input");
+                }
 
-                // Quick Open uses a Spotlight-style floating bar in design mode
-                // (rather than exiting) — users see the picker on top of the live
-                // preview without losing design mode.
-                await awaitsFor(function () {
-                    return _$(".quick-open-floating-bar").length > 0;
-                }, "floating Quick Open bar to appear", 3000);
-                expect(WorkspaceManager.isInDesignMode()).toBe(true);
+                async function closeQuickOpen() {
+                    if ($bar().length === 0) { return; }
+                    const input = $search()[0];
+                    if (input) {
+                        input.dispatchEvent(new testWindow.KeyboardEvent("keydown",
+                            { keyCode: 27, bubbles: true }));
+                    }
+                    await awaitsFor(function () { return $bar().length === 0; },
+                        "floating Quick Open bar to close", 3000);
+                }
 
-                // Close the picker.
-                const doc = testWindow.document;
-                doc.dispatchEvent(new testWindow.KeyboardEvent("keydown", { keyCode: 27, bubbles: true }));
-                await awaitsFor(function () {
-                    return _$(".quick-open-floating-bar").length === 0;
-                }, "floating Quick Open bar to close", 3000);
+                afterEach(async function () {
+                    await closeQuickOpen();
+                });
+
+                it("should show the floating bar and stay in design mode (no ModalBar)", async function () {
+                    await openQuickOpenInDesignMode();
+                    expect(WorkspaceManager.isInDesignMode()).toBe(true);
+                    // Design-mode variant — the Quick Open search field lives inside
+                    // the floating bar, not inside a normal ModalBar.
+                    expect($search().closest(".quick-open-floating-bar").length).toBe(1);
+                    expect($search().closest(".modal-bar").length).toBe(0);
+                });
+
+                it("should list project files in the dropdown", async function () {
+                    await openQuickOpenInDesignMode();
+                    await awaitsFor(function () { return $dropdownItems().length > 0; },
+                        "Quick Open dropdown to populate with project files", 3000);
+                    const names = $dropdownItems().map(function () {
+                        return _$(this).text();
+                    }).get().join(" | ");
+                    // The test project (QuickOpen-test-files) has lotsOfLines.html
+                    // and somelines.html — both should surface without any query.
+                    expect(names).toContain("lotsOfLines.html");
+                    expect(names).toContain("somelines.html");
+                });
+
+                it("should filter the dropdown as the user types", async function () {
+                    await openQuickOpenInDesignMode();
+                    await awaitsFor(function () { return $dropdownItems().length >= 2; },
+                        "Quick Open dropdown to populate", 3000);
+                    const beforeCount = $dropdownItems().length;
+
+                    await typeInSearch("somelines");
+                    await awaitsFor(function () {
+                        const items = $dropdownItems();
+                        if (items.length === 0) { return false; }
+                        // Every visible item must match the filter.
+                        let allMatch = true;
+                        items.each(function () {
+                            if (!/somelines/i.test(_$(this).text())) { allMatch = false; }
+                        });
+                        return allMatch && items.length < beforeCount;
+                    }, "dropdown to filter down to matching items", 3000);
+
+                    // The un-matching file shouldn't be present anymore.
+                    const filteredNames = $dropdownItems().map(function () {
+                        return _$(this).text();
+                    }).get().join(" | ");
+                    expect(filteredNames).toContain("somelines.html");
+                    expect(filteredNames).not.toContain("lotsOfLines.html");
+                });
+
+                it("should open the selected file when Enter is pressed from the floating bar", async function () {
+                    await openQuickOpenInDesignMode();
+                    await awaitsFor(function () { return $dropdownItems().length >= 2; },
+                        "Quick Open dropdown to populate", 3000);
+
+                    await typeInSearch("somelines");
+                    await awaitsFor(function () {
+                        const items = $dropdownItems();
+                        return items.length > 0 && /somelines/i.test(_$(items[0]).text());
+                    }, "somelines.html to be the top match", 3000);
+
+                    const input = $search()[0];
+                    input.dispatchEvent(new testWindow.KeyboardEvent("keydown",
+                        { keyCode: 13 /* Enter */, bubbles: true }));
+
+                    const DocumentManager = brackets.test.DocumentManager;
+                    await awaitsFor(function () {
+                        const doc = DocumentManager.getCurrentDocument();
+                        return doc && doc.file && doc.file.name === "somelines.html";
+                    }, "somelines.html to open in the editor", 5000);
+                });
             });
 
             it("should exit design mode when the git toolbar icon is clicked in design mode", async function () {