feat: move all the strings to strings.js file

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1180,7 +1180,7 @@ function RemoteFunctions(config) {
             let content = `<div class="node-options">`;
 
             // not sure if we need to hide/show the AI icon, right now showing always
-            content += `<span data-action="ai" title="Phoenix AI">
+            content += `<span data-action="ai" title="${config.strings.ai}">
                     ${ICONS.ai}
                 </span>`;
 
@@ -1681,7 +1681,7 @@ function RemoteFunctions(config) {
                     <div class="phoenix-ai-prompt-input-container">
                         <textarea
                             class="phoenix-ai-prompt-textarea"
-                            placeholder="Ask Phoenix AI to modify this element..."
+                            placeholder="${config.strings.aiPromptPlaceholder}"
                         ></textarea>
                         <button class="phoenix-ai-prompt-send-button" disabled>
                             ➤
@@ -2145,6 +2145,11 @@ function RemoteFunctions(config) {
             return;
         }
 
+        // if _hoverHighlight is uninitialized, initialize it
+        if (!_hoverHighlight && config.isLPEditFeaturesActive && shouldShowHighlightOnHover()) {
+            _hoverHighlight = new Highlight("#c8f9c5", true);
+        }
+
         // this is to check the user's settings, if they want to show the elements highlights on hover or click
         if (_hoverHighlight && config.isLPEditFeaturesActive && shouldShowHighlightOnHover()) {
             _hoverHighlight.clear();

src/LiveDevelopment/main.js

@@ -74,7 +74,9 @@ define(function main(require, exports, module) {
             selectParent: Strings.LIVE_DEV_MORE_OPTIONS_SELECT_PARENT,
             editText: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_TEXT,
             duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
-            delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE
+            delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
+            ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
+            aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER
         }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.

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

@@ -88,11 +88,11 @@ define(function (require, exports, module) {
 
     // live preview mode pref
     const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
-    const DEFAULT_LIVE_PREVIEW_MODE = "preview"; // preview, inspect or edit
+    const DEFAULT_LIVE_PREVIEW_MODE = "preview"; // preview, highlight or edit
     // define the live preview mode preference
     PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", DEFAULT_LIVE_PREVIEW_MODE, {
-        description: "Default live preview mode on startup (preview, inspect, edit)",
-        values: ["preview", "inspect", "edit"]
+        description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
+        values: ["preview", "highlight", "edit"]
     });
 
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
@@ -167,18 +167,18 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Live Preview 'Inspect Mode'. in this mode only the live preview matching with the source code is active
+     * Live Preview 'Highlight Mode'. in this mode only the live preview matching with the source code is active
      * Meaning that if user clicks on some element that element's source code will be highlighted and vice versa
      */
-    function _LPInspectMode() {
+    function _LPHighlightMode() {
         LiveDevelopment.setLivePreviewEditFeaturesActive(false);
         if(!_isLiveHighlightEnabled()) {
             LiveDevelopment.togglePreviewHighlight();
         }
     }
 
     /**
-     * Live Preview 'Edit Mode'. this is the most interactive mode, in here the inspect features are available
+     * Live Preview 'Edit Mode'. this is the most interactive mode, in here the highlight features are available
      * along with that we also show element's highlighted boxes and such
      */
     function _LPEditMode() {
@@ -190,16 +190,16 @@ define(function (require, exports, module) {
 
     /**
      * update the mode button text in the live preview toolbar UI based on the current mode
-     * @param {String} mode - The current mode ("preview", "inspect", or "edit")
+     * @param {String} mode - The current mode ("preview", "highlight", or "edit")
      */
     function _updateModeButton(mode) {
         if ($modeBtn) {
-            if (mode === "inspect") {
-                $modeBtn[0].textContent = "Inspect Mode";
+            if (mode === "highlight") {
+                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
             } else if (mode === "edit") {
-                $modeBtn[0].textContent = "Edit Mode";
+                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_EDIT;
             } else {
-                $modeBtn[0].textContent = "Preview Mode";
+                $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_PREVIEW;
             }
         }
     }
@@ -211,8 +211,8 @@ define(function (require, exports, module) {
         const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || "preview";
 
         // apply the saved
-        if (savedMode === "inspect") {
-            _LPInspectMode();
+        if (savedMode === "highlight") {
+            _LPHighlightMode();
         } else if (savedMode === "edit") {
             _LPEditMode();
         } else {
@@ -223,7 +223,9 @@ define(function (require, exports, module) {
     }
 
     function _showModeSelectionDropdown(event) {
-        const items = ["Preview Mode", "Inspect Mode", "Edit Mode"];
+        const items = [
+            Strings.LIVE_PREVIEW_MODE_PREVIEW, Strings.LIVE_PREVIEW_MODE_HIGHLIGHT, Strings.LIVE_PREVIEW_MODE_EDIT
+        ];
 
         const dropdown = new DropdownButton.DropdownButton("", items);
 
@@ -252,7 +254,7 @@ define(function (require, exports, module) {
             if (index === 0) {
                 PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
             } else if (index === 1) {
-                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "inspect");
+                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
             } else if (index === 2) {
                 PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
             }
@@ -947,8 +949,8 @@ define(function (require, exports, module) {
             // Get the current preference value directly
             const newMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE);
 
-            if (newMode === "inspect") {
-                _LPInspectMode();
+            if (newMode === "highlight") {
+                _LPHighlightMode();
             } else if (newMode === "edit") {
                 _LPEditMode();
             } else {

src/nls/root/strings.js

@@ -187,7 +187,13 @@ define({
     "LIVE_DEV_MORE_OPTIONS_EDIT_TEXT": "Edit Text",
     "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
     "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
+    "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
+    "LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
+    "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",
+    "LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
+    "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
+    "LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
 
     "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",
     "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser",