feat: add starter bar live preview disable config option

Author: devvaannsh

src/LiveDevelopment/LivePreviewConstants.js

@@ -44,5 +44,7 @@ define(function main(require, exports, module) {
 
     exports.PREFERENCE_SHOW_STYLES_BAR = "livePreviewShowStylesBar";
 
+    exports.PREFERENCE_SHOW_STARTER_BAR = "livePreviewShowStarterBar";
+
     exports.PREFERENCE_STYLES_BAR_POSITION = "livePreviewStylesBarPosition";
 });

src/LiveDevelopment/main.js

@@ -72,6 +72,7 @@ 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
         showStylesBar: true, // default value, this will get updated when the extension loads
+        showStarterBar: true, // default value, this will get updated when the extension loads
         stylesBarPosition: "", // saved dock side ("top"/"bottom"); empty = default bottom
         syncSourceAndPreview: true, // default value, this will get updated when the extension loads
         imageGalleryAutoOpen: true, // auto-open gallery on first image click per session
@@ -345,6 +346,13 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
+    function updateStarterBarConfig() {
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_SHOW_STARTER_BAR);
+        const config = MultiBrowserLiveDev.getConfig();
+        config.showStarterBar = prefValue !== false; // defaults to true (on)
+        MultiBrowserLiveDev.updateConfig(config);
+    }
+
     function updateStylesBarPositionConfig() {
         const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_STYLES_BAR_POSITION);
         const config = MultiBrowserLiveDev.getConfig();
@@ -376,6 +384,7 @@ define(function main(require, exports, module) {
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
     exports.updateStylesBarConfig = updateStylesBarConfig;
+    exports.updateStarterBarConfig = updateStarterBarConfig;
     exports.updateStylesBarPositionConfig = updateStylesBarPositionConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;

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

@@ -121,6 +121,12 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_STYLES_BAR_PREFERENCE
     });
 
+    // live preview starter bar preference (show/hide the starter bar on empty pages); on by default
+    const PREFERENCE_SHOW_STARTER_BAR = CONSTANTS.PREFERENCE_SHOW_STARTER_BAR;
+    PreferencesManager.definePreference(PREFERENCE_SHOW_STARTER_BAR, "boolean", true, {
+        description: Strings.LIVE_DEV_SETTINGS_SHOW_STARTER_BAR_PREFERENCE
+    });
+
     // live preview styles bar position preference; persists where the user last dragged the bar
     const PREFERENCE_STYLES_BAR_POSITION = CONSTANTS.PREFERENCE_STYLES_BAR_POSITION;
     PreferencesManager.definePreference(PREFERENCE_STYLES_BAR_POSITION, "string", "", {
@@ -1555,13 +1561,17 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_SHOW_STYLES_BAR, function() {
             LiveDevelopment.updateStylesBarConfig();
         });
+        PreferencesManager.on("change", PREFERENCE_SHOW_STARTER_BAR, function() {
+            LiveDevelopment.updateStarterBarConfig();
+        });
         PreferencesManager.on("change", PREFERENCE_STYLES_BAR_POSITION, function() {
             LiveDevelopment.updateStylesBarPositionConfig();
         });
         // Initialize element highlight, ruler lines and styles bar config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
         LiveDevelopment.updateStylesBarConfig();
+        LiveDevelopment.updateStarterBarConfig();
         LiveDevelopment.updateStylesBarPositionConfig();
 
         LiveDevelopment.openLivePreview();

src/nls/root/strings.js

@@ -184,6 +184,7 @@ define({
     "LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE": "Inspect element in Live Preview on 'hover' or 'click'. Defaults to 'hover'",
     "LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE": "Show measurements when elements are selected in live preview. Defaults to 'false'",
     "LIVE_DEV_SETTINGS_SHOW_STYLES_BAR_PREFERENCE": "Show the styles bar when elements are selected in live preview. Defaults to 'true'",
+    "LIVE_DEV_SETTINGS_SHOW_STARTER_BAR_PREFERENCE": "Show the starter bar when the live preview page is empty. Defaults to 'true'",
     "LIVE_DEV_SETTINGS_STYLES_BAR_POSITION_PREFERENCE": "Saved position of the live preview styles bar, set automatically when the bar is dragged. Empty places the bar at its default spot",
     "LIVE_DEV_TOOLBOX_SELECT_PARENT": "Select Parent",
     "LIVE_DEV_TOOLBOX_EDIT_TEXT": "Edit Text",
@@ -438,8 +439,6 @@ define({
     "LIVE_DEV_INSERT_SHOW_LESS": "Show less",
     "LIVE_DEV_INSERT_CREATE": "Create",
     "LIVE_DEV_STARTER_BAR_LABEL": "Your page is empty — add an element",
-    "LIVE_DEV_STARTER_BAR_ADD": "Add your first element",
-    "LIVE_DEV_STARTER_BAR_COLLAPSE": "Collapse",
     "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Download image",
     "LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER": "Choose image download folder",
     "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images\u2026",