refactor: move css styles for edit boxes to extension

abose · abose · commit 8268bc1d6cb0 · 2025-12-07T11:37:06.000+05:30
diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -20,7 +20,7 @@
  */
 
 /*jslint forin: true */
-/*global Node, MessageEvent, strings, icons */
+/*global Node, MessageEvent, strings, icons, cssStyles */
 /*theseus instrument: false */
 
 /**
@@ -1797,10 +1797,10 @@ function RemoteFunctions(config = {}) {
                 </span>
             </div>`;
 
-            let styles = config.styles.optionsBox;
+            let styles = cssStyles.optionsBox;
             // to highlight that in a different color, to show the selected state
             if (imageGallerySelected) {
-                styles += config.styles.optionsBoxImageGallerySelected;
+                styles += cssStyles.optionsBoxImageGallerySelected;
             }
 
             // add everything to the shadow box
@@ -1891,7 +1891,7 @@ function RemoteFunctions(config = {}) {
             // Create input HTML + styles
             const html = `
                 <style>
-                    ${config.styles.hyperlinkEditor}
+                    ${cssStyles.hyperlinkEditor}
                 </style>
                 <div class="hyperlink-input-box">
                     <div class="link-icon" title="${currentHref.trim() || strings.hyperlinkNoHref}">
@@ -2133,7 +2133,7 @@ function RemoteFunctions(config = {}) {
                 </div>
             `;
 
-            let styles = config.styles.optionsBoxDropdown;
+            let styles = cssStyles.optionsBoxDropdown;
             shadow.innerHTML = `<style>${styles}</style><div class="phoenix-dropdown">${content}</div>`;
             this._shadow = shadow;
         },
@@ -2265,7 +2265,7 @@ function RemoteFunctions(config = {}) {
             // add everything to the shadow box with CSS variables for dynamic color
             shadow.innerHTML = `
                 <style>
-                    ${config.styles.infoBox}
+                    ${cssStyles.infoBox}
                     :host {
                         --info-box-bg-color: ${bgColor};
                     }
@@ -2388,7 +2388,7 @@ function RemoteFunctions(config = {}) {
 
             shadow.innerHTML = `
                 <style>
-                    ${config.styles.aiPromptBox}
+                    ${cssStyles.aiPromptBox}
                     :host {
                         --ai-box-width: ${boxWidth}px;
                         --ai-box-height: ${boxHeight}px;
@@ -2607,7 +2607,7 @@ function RemoteFunctions(config = {}) {
 
             this._shadow.innerHTML = `
                 <style>
-                    ${config.styles.imageGallery}
+                    ${cssStyles.imageGallery}
                 </style>
 
                 <div class='phoenix-image-gallery-container'>
@@ -3321,7 +3321,7 @@ function RemoteFunctions(config = {}) {
                     </div>
                 </div>`;
 
-            shadow.innerHTML = `<style>${config.styles.hotCorner}</style>${content}`;
+            shadow.innerHTML = `<style>${cssStyles.hotCorner}</style>${content}`;
 
             this.element = container;
             this.button = shadow.querySelector(".hot-corner-play-btn");
@@ -3703,7 +3703,7 @@ function RemoteFunctions(config = {}) {
 
             shadow.innerHTML = `
                             <style>
-                                ${config.styles.ruler}
+                                ${cssStyles.ruler}
                             </style>
                             ${html}
                         `;
@@ -3865,7 +3865,7 @@ function RemoteFunctions(config = {}) {
 
         // use shadow DOM for style isolation
         const shadow = overlay.attachShadow({ mode: 'open' });
-        const styles = config.styles.dialogOverlay;
+        const styles = cssStyles.dialogOverlay;
 
         const content = `
             <div class="phoenix-dialog-overlay">
@@ -4916,7 +4916,7 @@ function RemoteFunctions(config = {}) {
         toast.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
         const shadow = toast.attachShadow({ mode: 'open' });
 
-        const styles = config.styles.toastMessage;
+        const styles = cssStyles.toastMessage;
 
         const content = `
             <div class="toast-container">
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
@@ -44,8 +44,7 @@ define(function main(require, exports, module) {
         ExtensionUtils      = require("utils/ExtensionUtils"),
         StringUtils         = require("utils/StringUtils"),
         EventDispatcher      = require("utils/EventDispatcher"),
-        WorkspaceManager    = require("view/WorkspaceManager"),
-        RemoteHelper        = require("LiveDevelopment/RemoteHelper");
+        WorkspaceManager    = require("view/WorkspaceManager");
 
 
     const KernalModeTrust = window.KernalModeTrust;
@@ -90,8 +89,7 @@ define(function main(require, exports, module) {
         mode: _getDefaultMode(), // 'edit', 'highlight', or 'preview' - will be updated when preference loads
         elemHighlights: "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
-        styles: RemoteHelper.remoteStyles
+        imageGalleryState: _getImageGalleryState() // image gallery selected state
     };
 
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
diff --git a/src/extensionsIntegrated/phoenix-pro/main.js b/src/extensionsIntegrated/phoenix-pro/main.js
@@ -7,6 +7,7 @@ define(function (require, exports, module) {
     require("./LivePreviewEdit");
     require("./remote-constants");
     require("./remote-icons");
+    require("./remote-styles");
 
     const AppInit = require("utils/AppInit"),
         Strings = require("strings");
diff --git a/src/extensionsIntegrated/phoenix-pro/remote-styles.js b/src/extensionsIntegrated/phoenix-pro/remote-styles.js
@@ -1,39 +1,10 @@
 /*
- * GNU AGPL-3.0 License
- *
  * Copyright (c) 2021 - present core.ai . All rights reserved.
- * Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved.
- *
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
- * for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
- *
- */
-
-/*
- * This is a helper file for LiveDevelopment/BrowserScripts/RemoteFunctions.js
- * since that file runs in the browser context, it doesn't have access to the phoenix editor,
- * so this file stores all the data that the remoteFunctions require.
- *
- * Everything from this file will be exported. and this file is loaded by LiveDevelopment/main.js which then
- * passes everything to RemoteFunctions via the config object.
- * Read `LiveDevelopment/main.js` for more details
- *
- * NOTE: this file cannot pass anything directly to RemoteFunctions. Everything has to go through:
- * `LiveDevelopment/main.js`.
- * This file is only present so that we can keep RemoteFunctions logic clean and keep its code concise.
+ * Proprietary code, all rights reserved.
  */
 
 define(function (require, exports, module) {
+    const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
     const optionsBoxStyles = `
                 :host {
                   all: initial !important;
@@ -1020,5 +991,6 @@ define(function (require, exports, module) {
         hotCorner: hotCornerStyles
     };
 
-    exports.remoteStyles = remoteStyles;
+    LiveDevProtocol.addRemoteFunctionConstantsScript("styles",
+        `const cssStyles = ${JSON.stringify(remoteStyles)};`);
 });
