feat: add strings for elements highlight feature

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -562,23 +562,23 @@ function RemoteFunctions(config) {
 
             // Only include select parent option if element supports it
             if (showSelectParentOption) {
-                content += `<span data-action="select-parent" title="Select Parent">
+                content += `<span data-action="select-parent" title="${config.strings.selectParent}">
                     ${ICONS.arrowUp}
                 </span>`;
             }
 
             // Only include edit text option if element supports it
             if (showEditTextOption) {
-                content += `<span data-action="edit-text" title="Edit Text">
+                content += `<span data-action="edit-text" title="${config.strings.editText}">
                     ${ICONS.edit}
                 </span>`;
             }
 
             // Always include duplicate and delete options
-            content += `<span data-action="duplicate" title="Duplicate">
+            content += `<span data-action="duplicate" title="${config.strings.duplicate}">
                     ${ICONS.copy}
                 </span>
-                <span data-action="delete" title="Delete">
+                <span data-action="delete" title="${config.strings.delete}">
                     ${ICONS.trash}
                 </span>
             </div>`;

src/LiveDevelopment/main.js

@@ -66,7 +66,16 @@ define(function main(require, exports, module) {
             showInfo: true
         },
         isLPEditFeaturesActive: isLPEditFeaturesActive,
-        elemHighlights: "hover" // default value, this will get updated when the extension loads
+        elemHighlights: "hover", // default value, this will get updated when the extension loads
+        // this strings are used in RemoteFunctions.js
+        // we need to pass this through config as remoteFunctions runs in browser context and cannot
+        // directly reference Strings file
+        strings: {
+            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
+        }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
     var _status,

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

@@ -89,7 +89,7 @@ define(function (require, exports, module) {
         values: Object.keys(SUPPORTED_FRAMEWORKS)
     });
     PreferencesManager.definePreference(LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", "hover", {
-        description: "show live preview element highlights on 'hover' or 'click'. Defaults to 'hover'"
+        description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
     });
 
     async function detectFramework($frameworkSelect, $hotReloadChk) {

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

@@ -27,11 +27,10 @@ <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
             </div>
 
             <div class="form-group" id="elementHighlightWrapper">
-                <hr>
-                <label for="elementHighlight">Show Live Preview Element Highlights on: </label>
+                <label for="elementHighlight">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT}} </label>
                 <select name="elementHighlight" id="elementHighlight">
-                    <option value="hover">hover</option>
-                    <option value="click">click</option>
+                    <option value="hover">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_HOVER}}</option>
+                    <option value="click">{{Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_CLICK}}</option>
                 </select>
             </div>
         </div>

src/nls/root/strings.js

@@ -179,6 +179,14 @@ define({
     "LIVE_DEV_SETTINGS_FRAMEWORK": "Server Framework",
     "LIVE_DEV_SETTINGS_FRAMEWORK_CUSTOM": "Custom",
     "LIVE_DEV_SETTINGS_FRAMEWORK_PREFERENCES": "Server Framework, currently supports only docusaurus",
+    "LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT": "Show Live Preview Element Highlights on:",
+    "LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_HOVER": "hover",
+    "LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_CLICK": "click",
+    "LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE": "show live preview element highlights on 'hover' or 'click'. Defaults to 'hover'",
+    "LIVE_DEV_MORE_OPTIONS_SELECT_PARENT": "Select Parent",
+    "LIVE_DEV_MORE_OPTIONS_EDIT_TEXT": "Edit Text",
+    "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
+    "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
 
     "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",