feat: styles bar dock position should be saved across reloads

Author: devvaannsh

src/LiveDevelopment/LivePreviewConstants.js

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

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
+        stylesBarDock: "bottom", // default dock side, 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
@@ -344,6 +345,13 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
+    function updateStylesBarDockConfig() {
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_STYLES_BAR_DOCK);
+        const config = MultiBrowserLiveDev.getConfig();
+        config.stylesBarDock = prefValue || "bottom";
+        MultiBrowserLiveDev.updateConfig(config);
+    }
+
     EventDispatcher.makeEventDispatcher(exports);
 
     // private api
@@ -368,6 +376,7 @@ define(function main(require, exports, module) {
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
     exports.updateStylesBarConfig = updateStylesBarConfig;
+    exports.updateStylesBarDockConfig = updateStylesBarDockConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

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

@@ -121,6 +121,13 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_STYLES_BAR_PREFERENCE
     });
 
+    // live preview styles bar dock side preference (where the bar docks); persists user choice
+    const PREFERENCE_STYLES_BAR_DOCK = CONSTANTS.PREFERENCE_STYLES_BAR_DOCK;
+    PreferencesManager.definePreference(PREFERENCE_STYLES_BAR_DOCK, "string", "bottom", {
+        description: Strings.LIVE_DEV_SETTINGS_STYLES_BAR_DOCK_PREFERENCE,
+        values: ["top", "bottom", "left", "right"]
+    });
+
     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";
@@ -1549,10 +1556,14 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_SHOW_STYLES_BAR, function() {
             LiveDevelopment.updateStylesBarConfig();
         });
+        PreferencesManager.on("change", PREFERENCE_STYLES_BAR_DOCK, function() {
+            LiveDevelopment.updateStylesBarDockConfig();
+        });
         // Initialize element highlight, ruler lines and styles bar config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
         LiveDevelopment.updateStylesBarConfig();
+        LiveDevelopment.updateStylesBarDockConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);

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_STYLES_BAR_DOCK_PREFERENCE": "Which side the live preview styles bar docks to: 'top', 'bottom', 'left' or 'right'. Defaults to 'bottom'",
     "LIVE_DEV_TOOLBOX_SELECT_PARENT": "Select Parent",
     "LIVE_DEV_TOOLBOX_EDIT_TEXT": "Edit Text",
     "LIVE_DEV_TOOLBOX_DOUBLE_CLICK_HINT": "Double-click",