feat(ccb): reinstate active-file label with dirty indicator

abose · abose · commit 64ac885e59e4 · 2026-04-23T18:57:54.000+05:30
Restores the vertical file-name + dirty-dot label that was removed in 22b2191 (replaced with a show-in-tree button at the time). The label hangs below the save group, reads the file name bottom-up, and shows a small amber dot at the top when the active document is dirty. Two improvements over the original: - Source the file from MainViewManager.getCurrentlyViewedFile(ACTIVE_PANE) instead of DocumentManager.getCurrentDocument(). getCurrentDocument() is CodeMirror-only, so the old label went blank whenever the active pane was an image or other non-CM view. Dirty state still goes through DocumentManager.getOpenDocumentForPath(fullPath), which is null for non-editable views — they correctly stay un-dirty. - Anti-pixelation for linux electron: swap `writing-mode: vertical-rl; transform: rotate(180deg)` for `writing-mode: sideways-lr`, which lets Chromium take its fast vertical-text path instead of rasterizing through a rotated transform. Pair it with translateZ(0), backface-visibility, -webkit-font-smoothing: antialiased, and text-rendering: geometricPrecision so the glyphs stay crisp even if a system falls back to the slow text path. Click still dispatches NAVIGATE_SHOW_IN_FILE_TREE (mirrors the binoculars affordance the label replaced). Tests: adds a 2b. #ccbFileLabel describe to CentralControlBar-integ-test covering render/placement, the name-shown / cleared-on-FILE_CLOSE_ALL cycle, the .is-dirty toggle via setText + refreshText, the click → NAVIGATE_SHOW_IN_FILE_TREE dispatch, and the label updating when the active file switches.
diff --git a/src/index.html b/src/index.html
@@ -969,6 +969,13 @@
                 <i class="fa-solid fa-floppy-disk"></i>
             </a>
         </div>
+        <div class="ccb-divider"></div>
+        <div class="ccb-group ccb-group-file">
+            <div id="ccbFileLabel" class="ccb-file-label">
+                <span class="ccb-file-dot">•</span>
+                <span class="ccb-file-name"></span>
+            </div>
+        </div>
     </div>
 
     <!--
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
@@ -47,6 +47,14 @@
         flex-direction: column;
         align-items: stretch;
         gap: 2px;
+
+        &.ccb-group-file {
+            flex: 0 1 auto;
+            max-height: 220px;
+            overflow: hidden;
+            justify-content: flex-start;
+            padding: 4px 0;
+        }
     }
 
     .ccb-divider {
@@ -116,6 +124,61 @@
         }
     }
 
+    /* Vertical filename label — clicking reveals the current file in the
+       file tree (keeps the old binoculars-on-label affordance). */
+    .ccb-file-label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 0;
+        color: @project-panel-text-2;
+        height: 100%;
+        overflow: hidden;
+        cursor: pointer;
+
+        .ccb-file-dot {
+            flex: 0 0 auto;
+            line-height: 1;
+            color: #f1b84e;
+            visibility: hidden;
+            font-size: 1rem;
+        }
+
+        &.is-dirty .ccb-file-dot {
+            visibility: visible;
+        }
+
+        .ccb-file-name {
+            flex: 1 1 auto;
+            min-height: 0;
+            /* `sideways-lr` rotates each glyph 90° CCW so the text reads
+               bottom-up naturally. Using this instead of `vertical-rl` +
+               `transform: rotate(180deg)` avoids the blurry sub-pixel
+               rasterization that the transform path produced on linux
+               electron, because Chromium can take its fast vertical-text
+               path for glyph layout and skip the rotated bitmap upscale. */
+            writing-mode: sideways-lr;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: @project-panel-text-1;
+            font-size: 13px;
+            font-weight: 500;
+            /* Promote to its own compositing layer + force AA — keeps the
+               rotated glyphs crisp even when the system falls back to the
+               slow text path. */
+            transform: translateZ(0);
+            backface-visibility: hidden;
+            -webkit-font-smoothing: antialiased;
+            text-rendering: geometricPrecision;
+        }
+
+        &:hover .ccb-file-name {
+            text-decoration: underline;
+        }
+    }
+
 }
 
 /* Editor collapse: actual layout handled in JS via .content width/visibility */
diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js
@@ -23,6 +23,8 @@ define(function (require, exports, module) {
     const AppInit           = require("utils/AppInit");
     const CommandManager    = require("command/CommandManager");
     const Commands          = require("command/Commands");
+    const DocumentManager   = require("document/DocumentManager");
+    const MainViewManager   = require("view/MainViewManager");
     const Strings           = require("strings");
     const WorkspaceManager  = require("view/WorkspaceManager");
     const SidebarView       = require("project/SidebarView");
@@ -32,6 +34,8 @@ define(function (require, exports, module) {
     let $bar;
     let $sidebar;
     let $content;
+    let $fileLabel;
+    let $fileName;
     let editorCollapsed = false;
     let savedToolbarWidth = null;
     let livePreviewWasOpen = false;
@@ -69,6 +73,35 @@ define(function (require, exports, module) {
         }
     }
 
+    function _updateFileLabel() {
+        if (!$fileLabel) {
+            return;
+        }
+        // Use MainViewManager instead of DocumentManager.getCurrentDocument()
+        // so non-editable views (images, custom viewers, etc.) still show up
+        // on the label. getCurrentDocument() is CodeMirror-backed only and
+        // would leave the label blank whenever the active pane is an image
+        // or other non-CM surface.
+        const file = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
+        if (!file) {
+            $fileLabel.removeClass("is-dirty");
+            $fileName.text("");
+            $fileLabel.attr("title", "");
+            return;
+        }
+        const name = file.name || "";
+        const fullPath = file.fullPath || "";
+        const displayPath = fullPath && Phoenix && Phoenix.app && Phoenix.app.getDisplayPath
+            ? Phoenix.app.getDisplayPath(fullPath)
+            : fullPath || name;
+        $fileName.text(name);
+        $fileLabel.attr("title", displayPath);
+        // Dirty only makes sense for files with a document behind them; for
+        // non-editable views there's no doc, so the class simply stays off.
+        const doc = DocumentManager.getOpenDocumentForPath(fullPath);
+        $fileLabel.toggleClass("is-dirty", !!(doc && doc.isDirty));
+    }
+
     function _executeCmd(id) {
         CommandManager.execute(id);
     }
@@ -263,6 +296,10 @@ define(function (require, exports, module) {
             e.preventDefault();
             _executeCmd(Commands.VIEW_HIDE_SIDEBAR);
         });
+        $("#ccbFileLabel").on("click", function (e) {
+            e.preventDefault();
+            _executeCmd(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+        });
     }
 
     const _toggleDesignModeCommand = CommandManager.register(Strings.CMD_TOGGLE_DESIGN_MODE,
@@ -274,6 +311,8 @@ define(function (require, exports, module) {
         $bar = $("#centralControlBar");
         $sidebar = $("#sidebar");
         $content = $(".content");
+        $fileLabel = $("#ccbFileLabel");
+        $fileName = $fileLabel.find(".ccb-file-name");
 
         _wireButtons();
         // The HTML titles on the control-bar buttons are fallback English
@@ -396,6 +435,11 @@ define(function (require, exports, module) {
         }
 
         _updateSidebarToggleIcon();
+
+        MainViewManager.on("currentFileChange.ccb", _updateFileLabel);
+        DocumentManager.on("dirtyFlagChange.ccb", _updateFileLabel);
+        DocumentManager.on("pathDeleted.ccb fileNameChange.ccb", _updateFileLabel);
+        _updateFileLabel();
     });
 
 
diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js
@@ -18,7 +18,7 @@
  *
  */
 
-/*global describe, it, expect, beforeAll, afterAll, beforeEach, afterEach, awaitsFor, awaits */
+/*global describe, it, expect, beforeAll, afterAll, beforeEach, afterEach, awaitsFor, awaitsForDone, awaits */
 
 define(function (require, exports, module) {
 
@@ -292,6 +292,102 @@ define(function (require, exports, module) {
             });
         });
 
+        describe("2b. #ccbFileLabel (active-file indicator)", function () {
+            let DocumentManager, MainViewManager;
+
+            beforeAll(function () {
+                DocumentManager = brackets.test.DocumentManager;
+                MainViewManager = brackets.test.MainViewManager;
+            });
+
+            afterAll(async function () {
+                // Leave the suite in the same "no file open" state we found it
+                // in so later describes don't pick up a stray document.
+                await awaitsForDone(
+                    CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                    "close files opened by ccbFileLabel tests");
+            });
+
+            it("should render #ccbFileLabel inside #centralControlBar", function () {
+                const $label = _$("#ccbFileLabel");
+                expect($label.length).toBe(1);
+                expect($label.closest("#centralControlBar").length).toBe(1);
+                expect($label.find(".ccb-file-name").length).toBe(1);
+                expect($label.find(".ccb-file-dot").length).toBe(1);
+            });
+
+            it("should show the active file's name and clear it when no file is open", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label to show somelines.html", 2000);
+                expect(_$("#ccbFileLabel").attr("title")).toContain("somelines.html");
+
+                await awaitsForDone(
+                    CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                    "close all files");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "";
+                }, "file label to clear when no doc", 2000);
+            });
+
+            it("should toggle .is-dirty as the active document's dirty flag changes", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label primed", 2000);
+
+                expect(_$("#ccbFileLabel").hasClass("is-dirty")).toBe(false);
+
+                const doc = DocumentManager.getCurrentDocument();
+                const originalText = doc.getText();
+                doc.setText(originalText + "\n// ccb dirty probe");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel").hasClass("is-dirty");
+                }, ".is-dirty to appear after setText", 2000);
+
+                doc.refreshText(originalText, doc.diskTimestamp);
+                await awaitsFor(function () {
+                    return !_$("#ccbFileLabel").hasClass("is-dirty");
+                }, ".is-dirty to clear after refresh", 2000);
+            });
+
+            it("should dispatch NAVIGATE_SHOW_IN_FILE_TREE when clicked", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label primed", 2000);
+
+                const executed = recordCommands(function () {
+                    _$("#ccbFileLabel").trigger("click");
+                });
+                expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+            });
+
+            it("should update when the active file switches", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "somelines.html label", 2000);
+
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["lotsOfLines.html"]),
+                    "open lotsOfLines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "lotsOfLines.html";
+                }, "label to switch to lotsOfLines.html", 2000);
+                expect(_$("#ccbFileLabel").attr("title")).toContain("lotsOfLines.html");
+            });
+        });
+
         describe("3. Toggle Design Mode command", function () {
 
             it("should execute VIEW_TOGGLE_DESIGN_MODE and flip isInDesignMode() from false to true and back", async function () {
