feat: use only chevron icon instead of full text for edit mode dropdown

Author: devvaannsh

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -370,50 +370,78 @@
     color: rgba(100, 180, 255, 0.8);
 }
 
-#livePreviewModeBtn {
-    min-width: fit-content;
+.lp-mode-btn-group {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     margin: 0 4px 0 3px;
-    max-width: 80%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none;
     border: 1px solid transparent;
+    border-radius: 3px;
     box-sizing: border-box;
+}
+
+.lp-mode-btn-group:hover {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-mode-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
     color: #a0a0a0;
-    font-size: 14px;
-    font-weight: normal;
-    padding: 0 0.35em;
+    padding: 0;
+    margin: 0;
 }
 
-#livePreviewModeBtn:hover,
-#livePreviewModeBtn:focus,
-#livePreviewModeBtn:active {
+#live-preview-plugin-toolbar .lp-mode-icon:hover,
+#live-preview-plugin-toolbar .lp-mode-icon:focus,
+#live-preview-plugin-toolbar .lp-mode-icon:active {
     background: transparent !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: none !important;
     box-shadow: none !important;
 }
 
-#livePreviewModeBtn.btn-dropdown::after {
-    position: static;
-    margin-top: 2px;
-    margin-left: 5px;
+.lp-mode-icon.selected {
+    color: #FBB03B;
 }
 
-#reloadLivePreviewButton {
+.lp-mode-dropdown-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
+    border-left: 1px solid transparent;
+    border-radius: 0 3px 3px 0;
     color: #a0a0a0;
-    margin-left: 3px;
-    margin-top: 0;
-    width: 30px;
+    padding: 0 4px;
+    margin: 0;
     height: 22px;
-    flex-shrink: 0;
+    font-size: 10px;
 }
 
-#designModeToggleLivePreviewButton {
+.lp-mode-btn-group:hover .lp-mode-dropdown-chevron {
+    border-left-color: rgba(255, 255, 255, 0.1);
+}
+
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:hover,
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:focus,
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:active {
+    background: transparent !important;
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+#reloadLivePreviewButton {
     color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
@@ -422,7 +450,7 @@
     flex-shrink: 0;
 }
 
-#previewModeLivePreviewButton {
+#designModeToggleLivePreviewButton {
     color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
@@ -431,10 +459,6 @@
     flex-shrink: 0;
 }
 
-#previewModeLivePreviewButton.selected{
-    color: #FBB03B;
-}
-
 .live-preview-status-overlay {
     display: flex;
     flex-direction: row;

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -169,6 +169,7 @@ define(function (require, exports, module) {
         $firefoxButtonBallast,
         $panelTitle,
         $modeBtn,
+        $modeBtnGroup,
         $previewBtn,
         $designModeBtn;
 
@@ -343,26 +344,19 @@ define(function (require, exports, module) {
      */
     function _updateLPControlsForMdviewer() {
         const inDesignMode = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
+        const showPen = !_isMdviewrActive;
+        // Dropdown is also hidden in design mode (see $designModeBtn wiring in
+        // _createExtensionPanel) because the preview-mode options are moot
+        // when the editor is fully collapsed.
+        const showChevron = !_isMdviewrActive && !inDesignMode;
         if ($previewBtn) {
-            $previewBtn.toggle(!_isMdviewrActive);
+            $previewBtn.toggle(showPen);
         }
         if ($modeBtn) {
-            // Also hidden in design mode (see $designModeBtn wiring in
-            // _createExtensionPanel) because the preview-mode dropdown is moot
-            // when the editor is fully collapsed.
-            $modeBtn.toggle(!_isMdviewrActive && !inDesignMode);
+            $modeBtn.toggle(showChevron);
         }
-    }
-
-    function _updateModeButton(mode) {
-        if ($modeBtn) {
-            if (mode === "highlight") {
-                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
-            } else if (mode === "edit") {
-                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_EDIT;
-            } else {
-                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_PREVIEW;
-            }
+        if ($modeBtnGroup && $modeBtnGroup.length) {
+            $modeBtnGroup.toggle(showPen || showChevron);
         }
     }
 
@@ -371,14 +365,12 @@ define(function (require, exports, module) {
 
         // Pencil button lights up only when edit mode is active; preview /
         // highlight modes leave it un-tinted. Click toggles between edit
-        // and preview.
+        // and preview. The chevron next to it opens the full mode dropdown.
         if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) {
             $previewBtn.addClass('selected');
         } else {
             $previewBtn.removeClass('selected');
         }
-
-        _updateModeButton(currentMode);
     }
 
     function _showModeSelectionDropdown(event) {
@@ -809,6 +801,7 @@ define(function (require, exports, module) {
         $panelTitle = $panel.find("#panel-live-preview-title");
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
         $modeBtn = $panel.find("#livePreviewModeBtn");
+        $modeBtnGroup = $panel.find("#lpModeBtnGroup");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
         $designModeBtn = $panel.find("#designModeToggleLivePreviewButton");
 

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -7,10 +7,14 @@
 	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-expand"></i>
 	        </button>
-	        <button id="previewModeLivePreviewButton" title="{{clickToToggleEdit}}" class="btn-alt-quiet toolbar-button">
-	            <i class="fa-solid fa-pencil"></i>
-	        </button>
-            <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
+            <span id="lpModeBtnGroup" class="lp-mode-btn-group">
+                <button id="previewModeLivePreviewButton" title="{{clickToToggleEdit}}" class="btn-alt-quiet lp-mode-icon">
+                    <i class="fa-solid fa-pencil"></i>
+                </button>
+                <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet lp-mode-dropdown-chevron">
+                    <i class="fa-solid fa-caret-down"></i>
+                </button>
+            </span>
         </div>
         <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
 <!--            these are buttons that are always invisible to help central align the panel title-->