Skip to content

Commit 8364fb8

Browse files
committed
feat(ccb): only show the file label in design mode
In code mode the active file is already obvious from the tab bar and working-files list, so the vertical CCB label is redundant chrome that just steals vertical space. In design mode the editor collapses and those affordances aren't visible — that's the only place the label earns its spot. Tag the divider preceding the file group with .ccb-file-divider so the divider + group can be hidden as a pair, and wrap both in a `body:not(.ccb-editor-collapsed)` rule. No JS toggle needed; the body class is already flipped by CentralControlBar when design mode changes. Adds a "should only be visible in design mode" integ test that checks :visible on both the label and the leading divider through enter/exit design-mode transitions.
1 parent 44d03a0 commit 8364fb8

3 files changed

Lines changed: 26 additions & 1 deletion

File tree

src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -969,7 +969,7 @@
969969
<i class="fa-solid fa-floppy-disk"></i>
970970
</a>
971971
</div>
972-
<div class="ccb-divider"></div>
972+
<div class="ccb-divider ccb-file-divider"></div>
973973
<div class="ccb-group ccb-group-file">
974974
<div id="ccbFileLabel" class="ccb-file-label">
975975
<span class="ccb-file-dot"></span>

src/styles/CentralControlBar.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,15 @@
181181

182182
}
183183

184+
/* The file label is only useful in design mode — in code mode the active
185+
file is already obvious from the tab bar / working-files list, so the
186+
vertical label (and its preceding divider) would be redundant chrome
187+
that steals vertical space in the CCB. */
188+
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-file-divider,
189+
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-group-file {
190+
display: none;
191+
}
192+
184193
/* Editor collapse: actual layout handled in JS via .content width/visibility */
185194
.ccb-editor-collapsed .content {
186195
overflow: hidden;

test/spec/CentralControlBar-integ-test.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,22 @@ define(function (require, exports, module) {
316316
expect($label.find(".ccb-file-dot").length).toBe(1);
317317
});
318318

319+
it("should only be visible in design mode (hidden in code mode)", async function () {
320+
// The active file is already obvious from the tab bar / working
321+
// files list in code mode, so the vertical label (and its
322+
// leading divider) are hidden and only surface in design mode.
323+
expect(_$("#ccbFileLabel").is(":visible")).toBe(false);
324+
expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(false);
325+
326+
await enterDesignMode();
327+
expect(_$("#ccbFileLabel").is(":visible")).toBe(true);
328+
expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(true);
329+
330+
await exitDesignMode();
331+
expect(_$("#ccbFileLabel").is(":visible")).toBe(false);
332+
expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(false);
333+
});
334+
319335
it("should show the active file's name and clear it when no file is open", async function () {
320336
await awaitsForDone(
321337
SpecRunnerUtils.openProjectFiles(["somelines.html"]),

0 commit comments

Comments
 (0)