feat: replace CCB file label with Show-in-File-Tree button

abose · abose · commit f54a2f043503 · 2026-04-20T21:04:27.000+05:30
- Remove the .ccb-group-file block (HTML, JS wiring, LESS). The vertical
  file name is redundant with the live-preview heading and file tabs.
- Drop no-longer-used DocumentManager and MainViewManager requires, plus
  the _updateFileLabel function and its event subscriptions.
- Add #ccbShowInTreeBtn below #searchNav in .ccb-group-nav with the
  legacy binoculars glyph inlined as SVG using currentColor so it
  inherits the button color. ViewBox tightened to 16x16 so the artwork
  fills the rendering box at the same weight as the pen-nib icon.
- Button invokes the existing NAVIGATE_SHOW_IN_FILE_TREE command and
  uses the existing Strings.CMD_SHOW_IN_TREE localized title.
- Update control-bar-tests-todo.md: replace the three file-label
  bullets with checks for the new button.
diff --git a/src/index.html b/src/index.html
@@ -964,16 +964,14 @@
         <div class="ccb-divider"></div>
         <div class="ccb-group ccb-group-nav">
             <a href="#" id="searchNav" class="ccb-btn"><i class="fa-solid fa-magnifying-glass"></i></a>
+            <a href="#" id="ccbShowInTreeBtn" class="ccb-btn" title="Show in File Tree">
+                <svg class="ccb-binoculars-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path fill="currentColor" d="M4.5 1A1.5 1.5 0 0 0 3 2.5V3h4v-.5A1.5 1.5 0 0 0 5.5 1h-1zM7 4v1h2V4h4v.882a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V13H9v-1.5a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5V13H1V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V4h4zM1 14v.5A1.5 1.5 0 0 0 2.5 16h3A1.5 1.5 0 0 0 7 14.5V14H1zm8 0v.5a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V14H9zm4-11H9v-.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5V3z"/>
+                </svg>
+            </a>
             <a href="#" id="navBackButton" class="ccb-btn"><i class="fa-solid fa-arrow-left"></i></a>
             <a href="#" id="navForwardButton" class="ccb-btn"><i class="fa-solid fa-arrow-right"></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,14 +47,6 @@
         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 {
@@ -81,6 +73,12 @@
             pointer-events: none;
         }
 
+        svg.ccb-binoculars-icon {
+            width: 15px;
+            height: 15px;
+            pointer-events: none;
+        }
+
         &:hover {
             color: @project-panel-text-1;
             background-color: rgba(255, 255, 255, 0.08);
@@ -128,49 +126,6 @@
         pointer-events: none;
     }
 
-    /* Vertical filename label — clicking reveals the current file in the
-       file tree, mirroring the old binoculars button. */
-    .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;
-            writing-mode: vertical-rl;
-            transform: rotate(180deg);
-            text-orientation: mixed;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: @project-panel-text-1;
-            font-size: 13px;
-            font-weight: 500;
-        }
-
-        &: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,8 +23,6 @@ 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");
 
@@ -33,8 +31,6 @@ define(function (require, exports, module) {
     let $bar;
     let $sidebar;
     let $content;
-    let $fileLabel;
-    let $fileName;
     let editorCollapsed = false;
     let savedToolbarWidth = null;
     let livePreviewWasOpen = false;
@@ -73,27 +69,6 @@ define(function (require, exports, module) {
         }
     }
 
-    function _updateFileLabel() {
-        if (!$fileLabel) {
-            return;
-        }
-        const doc = DocumentManager.getCurrentDocument();
-        if (!doc) {
-            $fileLabel.removeClass("is-dirty");
-            $fileName.text("");
-            $fileLabel.attr("title", "");
-            return;
-        }
-        const name = doc.file && doc.file.name ? doc.file.name : "";
-        const fullPath = doc.file && doc.file.fullPath ? doc.file.fullPath : "";
-        const displayPath = fullPath && Phoenix && Phoenix.app && Phoenix.app.getDisplayPath
-            ? Phoenix.app.getDisplayPath(fullPath)
-            : fullPath || name;
-        $fileName.text(name);
-        $fileLabel.attr("title", displayPath);
-        $fileLabel.toggleClass("is-dirty", !!doc.isDirty);
-    }
-
     function _executeCmd(id) {
         CommandManager.execute(id);
     }
@@ -286,7 +261,7 @@ define(function (require, exports, module) {
             e.preventDefault();
             _executeCmd(Commands.VIEW_HIDE_SIDEBAR);
         });
-        $("#ccbFileLabel").on("click", function (e) {
+        $("#ccbShowInTreeBtn").on("click", function (e) {
             e.preventDefault();
             _executeCmd(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
         });
@@ -301,8 +276,6 @@ define(function (require, exports, module) {
         $bar = $("#centralControlBar");
         $sidebar = $("#sidebar");
         $content = $(".content");
-        $fileLabel = $("#ccbFileLabel");
-        $fileName = $fileLabel.find(".ccb-file-name");
 
         // Cache the authored pen-nib SVG from the DOM so the toggle handler
         // can restore it after swapping in the fa-code icon for design mode.
@@ -315,6 +288,7 @@ define(function (require, exports, module) {
         // navForwardButton get their localized titles from NavigationProvider.)
         $("#ccbCollapseEditorBtn").attr("title", Strings.CCB_SWITCH_TO_DESIGN_MODE);
         $("#ccbSidebarToggleBtn").attr("title", Strings.CMD_TOGGLE_SIDEBAR);
+        $("#ccbShowInTreeBtn").attr("title", Strings.CMD_SHOW_IN_TREE);
         $("#ccbUndoBtn").attr("title", Strings.CMD_UNDO);
         $("#ccbRedoBtn").attr("title", Strings.CMD_REDO);
         $("#ccbSaveBtn").attr("title", Strings.CMD_FILE_SAVE);
@@ -428,11 +402,6 @@ define(function (require, exports, module) {
             };
         }
 
-        MainViewManager.on("currentFileChange.ccb", _updateFileLabel);
-        DocumentManager.on("dirtyFlagChange.ccb", _updateFileLabel);
-        DocumentManager.on("pathDeleted.ccb fileNameChange.ccb", _updateFileLabel);
-
-        _updateFileLabel();
         _updateSidebarToggleIcon();
     });
 
diff --git a/test/control-bar-tests-todo.md b/test/control-bar-tests-todo.md
@@ -33,11 +33,15 @@ Keep this file updated as we add coverage; remove lines as suites land.
 - [ ] `#ccbSidebarToggleBtn` executes `VIEW_HIDE_SIDEBAR` and the icon flips
       `fa-angles-left` ↔ `fa-angles-right` on panelCollapsed/panelExpanded.
 - [ ] The old `#sidebar-toggle-btn` in the menubar is NOT in the DOM.
-- [ ] Clicking `#ccbFileLabel` executes `NAVIGATE_SHOW_IN_FILE_TREE` and (if
-      sidebar was hidden) re-opens the sidebar as part of that command.
-- [ ] File label shows the current doc's `file.name` and uses
-      `Phoenix.app.getDisplayPath` for its tooltip.
-- [ ] Dirty indicator dot toggles with `DocumentManager`'s `dirtyFlagChange`.
+- [ ] `#ccbShowInTreeBtn` is rendered in `.ccb-group-nav` directly below
+      `#searchNav` and has a `title` of `Strings.CMD_SHOW_IN_TREE`.
+- [ ] Clicking `#ccbShowInTreeBtn` executes `NAVIGATE_SHOW_IN_FILE_TREE` (if
+      sidebar was hidden, it re-opens as part of the command).
+- [ ] Binoculars `<svg>` renders and inherits `.ccb-btn` color
+      (`currentColor` on the path).
+- [ ] Neither `#ccbFileLabel`, `.ccb-group-file`, `.ccb-file-label`,
+      `.ccb-file-name`, nor `.ccb-file-dot` exists in the DOM or in the
+      compiled CSS.
 
 ## 3. Toggle Design Mode command
 
