feat: add select mode button in the live preview toolbar

Author: devvaannsh

src/LiveDevelopment/main.js

@@ -354,6 +354,14 @@ define(function main(require, exports, module) {
 
     config.highlight = PreferencesManager.getViewState("livedevHighlight");
 
+    function setLivePreviewEditFeaturesActive(enabled) {
+        isLPEditFeaturesActive = enabled;
+        config.isLPEditFeaturesActive = enabled;
+        if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+            MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+        }
+    }
+
     // init commands
     CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
     CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
@@ -380,6 +388,7 @@ define(function main(require, exports, module) {
     exports.setLivePreviewPinned = setLivePreviewPinned;
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
     exports.togglePreviewHighlight = togglePreviewHighlight;
+    exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
 });

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

@@ -100,3 +100,33 @@
 .pointer-icon {
     background: url("./images/sprites.svg#pointer-icon") center no-repeat;
 }
+
+#livePreviewModeBtn {
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+    margin-right: 8px;
+    max-width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #3C3F41;
+    box-shadow: none;
+    border: 1px solid #3C3F41;
+    box-sizing: border-box;
+    color: #a0a0a0;
+    font-size: 14px;
+    font-weight: normal;
+}
+
+#livePreviewModeBtn:hover {
+    border: 1px solid rgba(0, 0, 0, 0.24) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+}
+
+#livePreviewModeBtn.btn-dropdown::after {
+    top: 9px !important;
+    left: 90px !important;
+}

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

@@ -62,6 +62,7 @@ define(function (require, exports, module) {
         NativeApp           = require("utils/NativeApp"),
         StringUtils         = require("utils/StringUtils"),
         FileSystem          = require("filesystem/FileSystem"),
+        DropdownButton     = require("widgets/DropdownButton"),
         BrowserStaticServer  = require("./BrowserStaticServer"),
         NodeStaticServer  = require("./NodeStaticServer"),
         LivePreviewSettings  = require("./LivePreviewSettings"),
@@ -95,6 +96,9 @@ define(function (require, exports, module) {
     </iframe>
     `;
 
+    let isEditModeEnabled = true;
+    let isHighlightModeEnabled = true;
+
     if(Phoenix.isTestWindow) {
         // for integ tests
         window._livePreviewIntegTest = {
@@ -120,7 +124,8 @@ define(function (require, exports, module) {
         $safariButtonBallast,
         $edgeButtonBallast,
         $firefoxButtonBallast,
-        $panelTitle;
+        $panelTitle,
+        $modeBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -139,6 +144,71 @@ define(function (require, exports, module) {
         editor.focus();
     });
 
+
+    function _toggleLivePreviewEditMode() {
+        isEditModeEnabled = !isEditModeEnabled;
+        LiveDevelopment.setLivePreviewEditFeaturesActive(isEditModeEnabled);
+    }
+
+    function _toggleHighlightMode() {
+        isHighlightModeEnabled = !isHighlightModeEnabled;
+
+        // only toggle highlights if the current state doesn't match what we want
+        const currentHighlightState = _isLiveHighlightEnabled();
+        if (currentHighlightState !== isHighlightModeEnabled) {
+            _toggleLiveHighlights();
+        }
+
+        Metrics.countEvent(
+            Metrics.EVENT_TYPE.LIVE_PREVIEW, "highlightMode", isHighlightModeEnabled ? "enable" : "disable"
+        );
+    }
+
+    function _showModeSelectionDropdown(event) {
+        const items = ["Edit Mode", "Highlight Mode"];
+
+        const dropdown = new DropdownButton.DropdownButton("", items, function (item, index) {
+            // Add checkmark if the mode is enabled
+            if ((index === 0 && isEditModeEnabled) || (index === 1 && isHighlightModeEnabled)) {
+                return "✓ " + item;
+            }
+            // when disabled we remove the check, add spacing so that content remains aligned
+            return "&nbsp;".repeat(4) + item;
+        });
+
+        // Append to document body for absolute positioning
+        $("body").append(dropdown.$button);
+
+        // Position the dropdown at the mouse coordinates
+        dropdown.$button.css({
+            position: "absolute",
+            left: event.pageX + "px",
+            top: event.pageY + "px",
+            zIndex: 1000
+        });
+
+        // Add a custom class to override the max-height
+        dropdown.dropdownExtraClasses = "mode-context-menu";
+
+        dropdown.showDropdown();
+
+        $(".mode-context-menu").css("max-height", "300px");
+
+        // handle the option selection
+        dropdown.on("select", function (e, item, index) {
+            if (index === 0) {
+                _toggleLivePreviewEditMode();
+            } else if (index === 1) {
+                _toggleHighlightMode();
+            }
+        });
+
+        // Remove the button after the dropdown is hidden
+        dropdown.$button.css({
+            display: "none"
+        });
+    }
+
     function _isLiveHighlightEnabled() {
         return CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).getChecked();
     }
@@ -402,6 +472,9 @@ define(function (require, exports, module) {
         $firefoxButtonBallast = $panel.find("#firefoxButtonBallast");
         $panelTitle = $panel.find("#panel-live-preview-title");
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
+        $modeBtn = $panel.find("#livePreviewModeBtn");
+
+        $modeBtn.on("click", _showModeSelectionDropdown);
 
         $panel.find(".live-preview-settings-banner-btn").on("click", ()=>{
             CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW_SETTINGS);

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

@@ -35,7 +35,8 @@
                 <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
             </button>
         </div>
-        <div style="width: 20%;display: flex;align-items: center; justify-content: flex-end">
+        <div style="width: 30%;display: flex;align-items: center; justify-content: flex-end">
+            <button id="livePreviewModeBtn" title="Configure Live Preview Modes" class="btn-alt-quiet toolbar-button btn-dropdown btn">Select Mode</button>
             <button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
                     class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
         </div>