feat: add option to toggle visibility of styles bar

Author: devvaannsh

src/LiveDevelopment/LivePreviewConstants.js

@@ -41,4 +41,6 @@ define(function main(require, exports, module) {
     exports.HIGHLIGHT_CLICK = "click";
 
     exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowMeasurements";
+
+    exports.PREFERENCE_SHOW_STYLES_BAR = "livePreviewShowStylesBar";
 });

src/LiveDevelopment/main.js

@@ -71,6 +71,7 @@ define(function main(require, exports, module) {
         mode: LIVE_HIGHLIGHT_MODE, // will be updated when we fetch entitlements
         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
         syncSourceAndPreview: true, // default value, this will get updated when the extension loads
         imageGalleryAutoOpen: true, // auto-open gallery on first image click per session
         isPaidUser: false, // will be updated when we fetch entitlements
@@ -336,6 +337,13 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
+    function updateStylesBarConfig() {
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_SHOW_STYLES_BAR);
+        const config = MultiBrowserLiveDev.getConfig();
+        config.showStylesBar = prefValue !== false; // defaults to true (on)
+        MultiBrowserLiveDev.updateConfig(config);
+    }
+
     EventDispatcher.makeEventDispatcher(exports);
 
     // private api
@@ -359,6 +367,7 @@ define(function main(require, exports, module) {
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
+    exports.updateStylesBarConfig = updateStylesBarConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

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

@@ -115,6 +115,12 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE
     });
 
+    // live preview styles bar preference (show/hide the styles bar on element selection); on by default
+    const PREFERENCE_SHOW_STYLES_BAR = CONSTANTS.PREFERENCE_SHOW_STYLES_BAR;
+    PreferencesManager.definePreference(PREFERENCE_SHOW_STYLES_BAR, "boolean", true, {
+        description: Strings.LIVE_DEV_SETTINGS_SHOW_STYLES_BAR_PREFERENCE
+    });
+
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const MDVIEWR_IFRAME_ID = "panel-md-preview-frame";
@@ -1540,9 +1546,13 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_SHOW_RULER_LINES, function() {
             LiveDevelopment.updateRulerLinesConfig();
         });
-        // Initialize element highlight and ruler lines config on startup
+        PreferencesManager.on("change", PREFERENCE_SHOW_STYLES_BAR, function() {
+            LiveDevelopment.updateStylesBarConfig();
+        });
+        // Initialize element highlight, ruler lines and styles bar config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
+        LiveDevelopment.updateStylesBarConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);

src/nls/root/strings.js

@@ -183,6 +183,7 @@ define({
     "LIVE_DEV_SETTINGS_FRAMEWORK_PREFERENCES": "Server Framework, currently supports only docusaurus",
     "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_TOOLBOX_SELECT_PARENT": "Select Parent",
     "LIVE_DEV_TOOLBOX_EDIT_TEXT": "Edit Text",
     "LIVE_DEV_TOOLBOX_DOUBLE_CLICK_HINT": "Double-click",
@@ -205,8 +206,11 @@ define({
     "LIVE_DEV_STYLER_SPACING": "Margin & padding",
     "LIVE_DEV_STYLER_LAYOUT": "Layout",
     "LIVE_DEV_STYLER_TEXT_STYLE": "Text style",
+    "LIVE_DEV_STYLER_DOCK": "Dock position",
     "LIVE_DEV_STYLER_DOCK_TOP": "Move bar to top",
     "LIVE_DEV_STYLER_DOCK_BOTTOM": "Move bar to bottom",
+    "LIVE_DEV_STYLER_DOCK_LEFT": "Move bar to left",
+    "LIVE_DEV_STYLER_DOCK_RIGHT": "Move bar to right",
     "LIVE_DEV_STYLER_RESET": "Reset changes",
     "LIVE_DEV_STYLER_NOTHING_TO_RESET": "No changes to reset",
     "LIVE_DEV_STYLER_CLOSE_SAVED": "Done",
@@ -710,6 +714,7 @@ define({
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
     "LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Inspect Element on Hover",
     "LIVE_PREVIEW_SHOW_RULER_LINES": "Show Measurements",
+    "LIVE_PREVIEW_SHOW_STYLES_BAR": "Show Styles Bar",
     "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_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",