feat: show toast notification when clicked on non-editable elements

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1792,7 +1792,7 @@ function RemoteFunctions(config = {}) {
             const leftPos = offset.left;
 
             // if element is non-editable we use gray bg color in info box, otherwise normal blue color
-            const bgColor = this.element.hasAttribute('data-brackets-id') ? '#4285F4' : '#666666';
+            const bgColor = this.element.hasAttribute('data-brackets-id') ? '#4285F4' : '#3C3F41';
 
             const styles = `
                 :host {
@@ -3846,6 +3846,12 @@ function RemoteFunctions(config = {}) {
             dismissImageRibbonGallery();
         }
 
+        // if element is not editable and user clicks on it, then we show a toast notification saying
+        // that this element is not editable
+        if (!element.hasAttribute("data-brackets-id")) {
+            showToast("Element not editable - generated by script");
+        }
+
         // make sure that the element is actually visible to the user
         if (isElementVisible(element)) {
             // Only show more options box for editable elements (have data-brackets-id)
@@ -4540,6 +4546,78 @@ function RemoteFunctions(config = {}) {
         dismissImageRibbonGallery();
     }
 
+    let _toastTimeout = null;
+
+    /**
+     * this function is to show a toast notification at the bottom center of the screen
+     * this toast message is used when user tries to edit a non-editable element
+     * @param {String} message - the message to display in the toast
+     */
+    function showToast(message) {
+        // clear any existing toast & timer, if there are any
+        const existingToast = window.document.getElementById('phoenix-toast-notification');
+        if (existingToast) {
+            existingToast.remove();
+        }
+        if (_toastTimeout) {
+            clearTimeout(_toastTimeout);
+        }
+
+        // create a new fresh toast container
+        const toast = window.document.createElement('div');
+        toast.id = 'phoenix-toast-notification';
+        const shadow = toast.attachShadow({ mode: 'open' });
+
+        const styles = `
+            :host {
+                all: initial !important;
+            }
+
+            .toast-container {
+                position: fixed !important;
+                bottom: 30px !important;
+                left: 50% !important;
+                transform: translateX(-50%) translateY(0) !important;
+                background-color: #333333f2 !important;
+                color: white !important;
+                padding: 10px 12px !important;
+                border-radius: 6px !important;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+                font-family: Arial, sans-serif !important;
+                font-size: 13px !important;
+                line-height: 1.4 !important;
+                z-index: 2147483647 !important;
+                pointer-events: none !important;
+                text-align: center !important;
+                max-width: 90% !important;
+                box-sizing: border-box !important;
+                animation: slideUp 0.3s ease-out !important;
+            }
+
+            @keyframes slideUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        `;
+
+        shadow.innerHTML = `<style>${styles}</style><div class="toast-container">${message}</div>`;
+        window.document.body.appendChild(toast);
+
+        // Auto-dismiss after 3 seconds
+        _toastTimeout = setTimeout(() => {
+            if (toast && toast.parentNode) {
+                toast.remove();
+            }
+            _toastTimeout = null;
+        }, 3000);
+    }
+
     /**
      * Helper function to cleanup previously clicked element highlighting and state
      */