Skip to content

Commit fac5268

Browse files
committed
fix(workspace): update escape/shift-escape tests and fix plugin panel min width
- Update tests for new escape toggle behavior (second escape re-shows panel) - Replace shift-escape collapse tests with focus-switching tests - Add tests for: shift-escape focus toggle, custom panel focus handler, default panel open on shift-escape, app-drawer-button toggle - Fix _showPluginSidePanel to include icons bar width in makeResizable minSize so toolbar respects minimum content + icons width - Fix _clampPluginPanelWidth to enforce minimum width (not just maximum) - Move #app-drawer-button from runtime JS creation to index.html - Move app-drawer-button inline styles to brackets.less
1 parent de4dc61 commit fac5268

5 files changed

Lines changed: 110 additions & 28 deletions

File tree

src/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -999,6 +999,7 @@
999999
<a id="update-notification" href="#" class="forced-hidden"></a>
10001000
</div>
10011001
<div class="bottom-buttons">
1002+
<a id="app-drawer-button" href="#"></a>
10021003
</div>
10031004
</div>
10041005
</div>

src/styles/brackets.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1189,6 +1189,12 @@ a, img {
11891189
}
11901190
}
11911191

1192+
#app-drawer-button {
1193+
background-image: url("images/app-drawer.svg");
1194+
background-position: center;
1195+
background-size: 16px;
1196+
}
1197+
11921198
/* Project panel */
11931199

11941200
#working-set-list-container {

src/view/DefaultPanelView.js

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -197,19 +197,9 @@ define(function (require, exports, module) {
197197
}
198198
}
199199

200-
// Create the app-drawer toolbar icon above the profile button
201-
const $drawerBtn = $("<a>")
202-
.attr({
203-
id: "app-drawer-button",
204-
href: "#",
205-
title: Strings.BOTTOM_PANEL_DEFAULT_TITLE
206-
})
207-
.css({
208-
"background-image": "url('" + iconURL + "')",
209-
"background-position": "center",
210-
"background-size": "16px"
211-
})
212-
.prependTo($("#main-toolbar .bottom-buttons"));
200+
// The app-drawer button is defined in index.html; set its title here.
201+
const $drawerBtn = $("#app-drawer-button")
202+
.attr("title", Strings.BOTTOM_PANEL_DEFAULT_TITLE);
213203

214204
$drawerBtn.on("click", function () {
215205
if (_panel.isVisible()) {

src/view/WorkspaceManager.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -509,17 +509,21 @@ define(function (require, exports, module) {
509509
minToolbarWidth,
510510
Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100)
511511
);
512-
if ($mainToolbar.width() > maxToolbarWidth) {
513-
$mainToolbar.width(maxToolbarWidth);
514-
$windowContent.css("right", maxToolbarWidth);
512+
let currentWidth = $mainToolbar.width();
513+
if (currentWidth > maxToolbarWidth || currentWidth < minToolbarWidth) {
514+
let clampedWidth = Math.max(minToolbarWidth, Math.min(currentWidth, maxToolbarWidth));
515+
$mainToolbar.width(clampedWidth);
516+
$windowContent.css("right", clampedWidth);
515517
Resizer.resyncSizer($mainToolbar[0]);
516518
}
517519
}
518520

519521
function _showPluginSidePanel(panelID) {
520522
let panelBeingShown = getPanelForID(panelID);
523+
let pluginIconsBarWidth = $pluginIconsBar.outerWidth();
524+
let minToolbarWidth = (panelBeingShown.minWidth || 0) + pluginIconsBarWidth;
521525
Resizer.makeResizable($mainToolbar, Resizer.DIRECTION_HORIZONTAL, Resizer.POSITION_LEFT,
522-
panelBeingShown.minWidth, false, undefined, true,
526+
minToolbarWidth, false, undefined, true,
523527
undefined, $windowContent, undefined, _getInitialSize(panelBeingShown));
524528
Resizer.show($mainToolbar[0]);
525529
_clampPluginPanelWidth(panelBeingShown);
@@ -682,9 +686,10 @@ define(function (require, exports, module) {
682686
}
683687
if (EditorManager.getFocusedEditor()) {
684688
// Editor has focus — focus the panel
685-
const activePanel = PanelView.getActiveBottomPanel();
689+
let activePanel = PanelView.getActiveBottomPanel();
686690
if(!activePanel || !activePanel.isVisible()){
687691
_togglePanels();
692+
activePanel = PanelView.getActiveBottomPanel();
688693
}
689694
activePanel.focus();
690695
} else {

test/spec/MainViewManager-integ-test.js

Lines changed: 90 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1044,7 +1044,7 @@ define(function (require, exports, module) {
10441044
expect(panel1.isVisible()).toBeFalse();
10451045
});
10461046

1047-
it("should not toggle bottom panel back on subsequent escape", async function () {
1047+
it("should toggle bottom panel back on subsequent escape", async function () {
10481048
panel1.show();
10491049
expect(panel1.isVisible()).toBeTrue();
10501050

@@ -1055,28 +1055,54 @@ define(function (require, exports, module) {
10551055
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown", _$("#editor-holder")[0]);
10561056
expect(panel1.isVisible()).toBeFalse();
10571057
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown", _$("#editor-holder")[0]);
1058-
expect(panel1.isVisible()).toBeFalse();
1058+
expect(panel1.isVisible()).toBeTrue();
10591059
});
10601060

1061-
it("should shift-escape also collapse bottom panel", async function () {
1061+
it("should shift-escape focus active panel instead of collapsing", async function () {
10621062
panel1.show();
10631063
expect(panel1.isVisible()).toBeTrue();
10641064

1065+
let focusCalled = false;
1066+
panel1.focus = function () {
1067+
focusCalled = true;
1068+
return true;
1069+
};
1070+
10651071
expect(MainViewManager.getActivePaneId()).toEqual("first-pane");
10661072
promise = MainViewManager._open(MainViewManager.FIRST_PANE, FileSystem.getFileForPath(testPath + "/test.js"));
10671073
await awaitsForDone(promise, "MainViewManager.doOpen");
10681074

10691075
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown", _$("#editor-holder")[0], {
10701076
shiftKey: true
10711077
});
1072-
expect(panel1.isVisible()).toBeFalse();
1078+
// Shift+Escape should focus the panel, not collapse it
1079+
expect(panel1.isVisible()).toBeTrue();
1080+
expect(focusCalled).toBeTrue();
1081+
delete panel1.focus;
10731082
});
10741083

1075-
it("should shift-escape collapse bottom panel regardless of canBeShown", async function () {
1084+
it("should shift-escape from panel focus the editor", async function () {
1085+
expect(MainViewManager.getActivePaneId()).toEqual("first-pane");
1086+
promise = MainViewManager._open(MainViewManager.FIRST_PANE, FileSystem.getFileForPath(testPath + "/test.js"));
1087+
await awaitsForDone(promise, "MainViewManager.doOpen");
1088+
10761089
panel1.show();
1077-
panel2.registerCanBeShownHandler(function () {
1078-
return false;
1079-
});
1090+
expect(panel1.isVisible()).toBeTrue();
1091+
1092+
// Blur the editor so getFocusedEditor() returns null
1093+
_$("#some-panel1")[0].setAttribute("tabindex", "-1");
1094+
_$("#some-panel1")[0].focus();
1095+
expect(EditorManager.getFocusedEditor()).toBeFalsy();
1096+
1097+
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown",
1098+
_$("#editor-holder")[0], { shiftKey: true });
1099+
// Editor should regain focus
1100+
expect(EditorManager.getFocusedEditor()).toBeTruthy();
1101+
});
1102+
1103+
it("should shift-escape open default panel when no panel is visible", async function () {
1104+
panel1.hide();
1105+
panel2.hide();
10801106

10811107
expect(MainViewManager.getActivePaneId()).toEqual("first-pane");
10821108
promise = MainViewManager._open(MainViewManager.FIRST_PANE, FileSystem.getFileForPath(testPath + "/test.js"));
@@ -1085,8 +1111,62 @@ define(function (require, exports, module) {
10851111
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown", _$("#editor-holder")[0], {
10861112
shiftKey: true
10871113
});
1088-
expect(panel1.isVisible()).toBeFalse();
1089-
panel2.registerCanBeShownHandler(null);
1114+
// A panel should now be visible (the default/quick access panel)
1115+
let defaultPanel = WorkspaceManager.getPanelForID(WorkspaceManager.DEFAULT_PANEL_ID);
1116+
expect(defaultPanel.isVisible()).toBeTrue();
1117+
defaultPanel.hide();
1118+
});
1119+
1120+
it("should shift-escape focus panel with custom focus handler", async function () {
1121+
// Create a panel with a text input that accepts focus
1122+
let focusPanelTemplate = `<div id="focus-test-panel" class="bottom-panel vert-resizable top-resizer">
1123+
<input id="focus-test-input" type="text" />
1124+
</div>`;
1125+
let focusPanel = WorkspaceManager.createBottomPanel("focusTestPanel",
1126+
_$(focusPanelTemplate), 100);
1127+
1128+
focusPanel.focus = function () {
1129+
_$("#focus-test-input")[0].focus();
1130+
return true;
1131+
};
1132+
1133+
focusPanel.show();
1134+
expect(focusPanel.isVisible()).toBeTrue();
1135+
1136+
expect(MainViewManager.getActivePaneId()).toEqual("first-pane");
1137+
promise = MainViewManager._open(MainViewManager.FIRST_PANE, FileSystem.getFileForPath(testPath + "/test.js"));
1138+
await awaitsForDone(promise, "MainViewManager.doOpen");
1139+
1140+
// Shift+Escape from editor should focus the panel's text input
1141+
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown",
1142+
_$("#editor-holder")[0], { shiftKey: true });
1143+
expect(testWindow.document.activeElement).toBe(_$("#focus-test-input")[0]);
1144+
1145+
// Shift+Escape from panel should focus the editor
1146+
SpecRunnerUtils.simulateKeyEvent(KeyEvent.DOM_VK_ESCAPE, "keydown",
1147+
_$("#editor-holder")[0], { shiftKey: true });
1148+
expect(EditorManager.getFocusedEditor()).toBeTruthy();
1149+
1150+
focusPanel.hide();
1151+
WorkspaceManager.destroyBottomPanel("focusTestPanel");
1152+
});
1153+
1154+
it("should app-drawer-button toggle the default panel", async function () {
1155+
panel1.hide();
1156+
panel2.hide();
1157+
let defaultPanel = WorkspaceManager.getPanelForID(WorkspaceManager.DEFAULT_PANEL_ID);
1158+
if (defaultPanel.isVisible()) {
1159+
defaultPanel.hide();
1160+
}
1161+
expect(defaultPanel.isVisible()).toBeFalse();
1162+
1163+
// Click app-drawer-button to show the default panel
1164+
_$("#app-drawer-button").click();
1165+
expect(defaultPanel.isVisible()).toBeTrue();
1166+
1167+
// Click again to hide it
1168+
_$("#app-drawer-button").click();
1169+
expect(defaultPanel.isVisible()).toBeFalse();
10901170
});
10911171

10921172
it("should escape collapse bottom panel regardless of canBeShown", async function () {

0 commit comments

Comments
 (0)