Live Preview fixes

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -26,10 +26,8 @@ function RemoteFunctions(config = {}) {
         __description: "Use this to keep shared state for Live Preview Edit instead of window.*"
     };
 
-    let _localHighlight;
     let _hoverHighlight;
     let _clickHighlight;
-    let _setup = false;
     let _hoverLockTimer = null;
 
     // this will store the element that was clicked previously (before the new click)
@@ -185,16 +183,6 @@ function RemoteFunctions(config = {}) {
     // the below code comment is replaced by added scripts for extensibility
     // DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_CONSTANT_SCRIPTS
 
-    // determine whether an event should be processed for Live Development
-    function _validEvent(event) {
-        if (window.navigator.platform.substr(0, 3) === "Mac") {
-            // Mac
-            return event.metaKey;
-        }
-        // Windows
-        return event.ctrlKey;
-    }
-
     // helper function to check if an element is inside the HEAD tag
     // we need this because we don't wanna trigger the element highlights on head tag and its children,
     // except for <style> tags which should be allowed
@@ -575,26 +563,6 @@ function RemoteFunctions(config = {}) {
         }
     };
 
-    function onMouseOver(event) {
-        if (_validEvent(event)) {
-            const element = event.target;
-            if(LivePreviewView.isElementInspectable(element) && element.nodeType === Node.ELEMENT_NODE ) {
-                _localHighlight.add(element, true);
-            }
-        }
-    }
-
-    function onMouseOut(event) {
-        if (_validEvent(event)) {
-            _localHighlight.clear();
-        }
-    }
-
-    function onMouseMove(event) {
-        onMouseOver(event);
-        window.document.removeEventListener("mousemove", onMouseMove);
-    }
-
     // helper function to get the current elements highlight mode
     // this is as per user settings (either click or hover)
     function getHighlightMode() {
@@ -727,14 +695,6 @@ function RemoteFunctions(config = {}) {
         const outlineColor = element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) ? "#4285F4" : "#3C3F41";
         element.style.outline = `1px solid ${outlineColor}`;
 
-        // Only apply background tint for editable elements (not for dynamic/read-only)
-        if (element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
-            if (element._originalBackgroundColor === undefined) {
-                element._originalBackgroundColor = element.style.backgroundColor;
-            }
-            element.style.backgroundColor = "rgba(0, 162, 255, 0.2)";
-        }
-
         if (!_clickHighlight) {
             _clickHighlight = new Highlight("#cfc");
         }
@@ -804,32 +764,12 @@ function RemoteFunctions(config = {}) {
             });
         }
 
-        // call the selectElement as selectElement handles all the highlighting/boxes and all UI related stuff
-        selectElement(element);
-        brieflyDisableHoverListeners();
-    }
-
-    function onKeyUp(event) {
-        if (_setup && !_validEvent(event)) {
-            window.document.removeEventListener("keyup", onKeyUp);
-            window.document.removeEventListener("mouseover", onMouseOver);
-            window.document.removeEventListener("mouseout", onMouseOut);
-            window.document.removeEventListener("mousemove", onMouseMove);
-            _localHighlight.clear();
-            _localHighlight = undefined;
-            _setup = false;
-        }
-    }
-
-    function onKeyDown(event) {
-        if (!_setup && _validEvent(event)) {
-            window.document.addEventListener("keyup", onKeyUp);
-            window.document.addEventListener("mouseover", onMouseOver);
-            window.document.addEventListener("mouseout", onMouseOut);
-            window.document.addEventListener("mousemove", onMouseMove);
-            _localHighlight = new Highlight("#ecc", true);
-            _setup = true;
+        // we call the select element function only when the element is not editable (JS generated content)
+        // because for editable elements, highlightRule function already calls selectElement internally
+        if (!LivePreviewView.isElementEditable(element)) {
+            selectElement(element);
         }
+        brieflyDisableHoverListeners();
     }
 
     // remove active highlights
@@ -870,13 +810,10 @@ function RemoteFunctions(config = {}) {
         }
 
         // select the first valid highlighted element
-        var foundValidElement = false;
+        let foundValidElement = false;
         for (i = 0; i < nodes.length; i++) {
             if(LivePreviewView.isElementInspectable(nodes[i], true) && nodes[i].tagName !== "BR") {
-                // only call selectElement if it's a different element to avoid unnecessary box recreation
-                if (previouslyClickedElement !== nodes[i]) {
-                    selectElement(nodes[i]);
-                }
+                selectElement(nodes[i]);
                 foundValidElement = true;
                 break;
             }
@@ -1256,16 +1193,7 @@ function RemoteFunctions(config = {}) {
      * when config is changed we clear all the highlighting and stuff
      */
     function _handleConfigurationChange() {
-        if (_hoverHighlight) {
-            _hoverHighlight.clear();
-        }
-        cleanupPreviousElementState();
-        const allElements = window.document.querySelectorAll(`[${GLOBALS.DATA_BRACKETS_ID_ATTR}]`);
-        for (let i = 0; i < allElements.length; i++) {
-            if (allElements[i]._originalBackgroundColor !== undefined) {
-                clearElementBackground(allElements[i]);
-            }
-        }
+        hideHighlight();
         dismissUIAndCleanupState();
     }
 
@@ -1280,24 +1208,18 @@ function RemoteFunctions(config = {}) {
                 previouslyClickedElement.style.outline = "";
             }
             delete previouslyClickedElement._originalOutline;
+            previouslyClickedElement = null;
+        }
 
-            clearElementBackground(previouslyClickedElement);
-            if (_hoverHighlight) {
-                _hoverHighlight.clear();
-            }
-            if (_clickHighlight) {
-                _clickHighlight.clear();
-                _clickHighlight = null;
-            }
+        if (config.mode === 'edit') {
+            hideHighlight();
 
             // Notify handlers about cleanup
             getAllToolHandlers().forEach(handler => {
                 if (handler.onElementCleanup) {
                     handler.onElementCleanup();
                 }
             });
-
-            previouslyClickedElement = null;
         }
     }
 
@@ -1316,7 +1238,6 @@ function RemoteFunctions(config = {}) {
     function registerHandlers() {
         hideHighlight(); // clear previous highlighting
         disableHoverListeners(); // Always remove existing listeners first to avoid duplicates
-        window.document.removeEventListener("keydown", onKeyDown);
         getAllToolHandlers().forEach(handler => {
             if (handler.unregisterInteractionBlocker) {
                 handler.unregisterInteractionBlocker();
@@ -1332,7 +1253,6 @@ function RemoteFunctions(config = {}) {
 
             // register the event handlers
             enableHoverListeners();
-            window.document.addEventListener("keydown", onKeyDown);
 
             // this is to block all the interactions of the user created elements
             // so that lets say user created link doesn't redirect in edit mode

src/LiveDevelopment/main.js

@@ -97,7 +97,8 @@ define(function main(require, exports, module) {
         elemHighlights: CONSTANTS.HIGHLIGHT_HOVER, // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
         imageGalleryState: _getImageGalleryState(), // image gallery selected state
-        isPaidUser: false // will be updated when we fetch entitlements
+        isPaidUser: false, // will be updated when we fetch entitlements
+        hasLiveEditCapability: false // handled inside _liveEditCapabilityChanged function
     };
 
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
@@ -232,6 +233,12 @@ define(function main(require, exports, module) {
     function _liveEditCapabilityChanged(newCapability) {
         if(newCapability !== hasLiveEditCapability){
             hasLiveEditCapability = newCapability;
+
+            // update the config to include the live edit capability
+            const config = MultiBrowserLiveDev.getConfig();
+            config.hasLiveEditCapability = hasLiveEditCapability;
+            MultiBrowserLiveDev.updateConfig(config);
+
             if(!hasLiveEditCapability && getCurrentMode() === LIVE_EDIT_MODE){
                 // downgraded, so we need to disable live edit mode
                 setMode(LIVE_HIGHLIGHT_MODE);

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

@@ -158,33 +158,26 @@
 }
 
 .live-preview-status-overlay {
-    width: calc(100% - 3px);
-    position: absolute;
-    top: 30px;
-    left: 3px;
-    z-index: 100;
-}
-
-.live-preview-status-overlay.full-width {
-    width: 100%;
-    left: 0;
+    display: flex;
+    flex-direction: row;
+    background-color: #666;
+    color: #ededed;
+    justify-content: center;
+    align-items: center;
+    padding: 0.35em;
+    position: relative;
 }
 
 .live-preview-overlay-message {
-    color: #ededed;
-    background-color: #666;
-    padding: 0.35em;
-    vertical-align: top;
     text-align: center;
+    flex: 1;
 }
 
 .live-preview-overlay-close {
-    position: absolute;
-    top: 7px;
-    right: 12px;
     font-size: 12px;
     cursor: pointer;
-    color: #ededed;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .live-preview-overlay-close:hover {