Live preview styles editor preference settings

src/LiveDevelopment/LivePreviewConstants.js

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

src/LiveDevelopment/main.js

@@ -71,6 +71,8 @@ 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
+        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
@@ -336,6 +338,20 @@ 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);
+    }
+
+    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
@@ -359,6 +375,8 @@ define(function main(require, exports, module) {
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
     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

@@ -115,6 +115,19 @@ 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
+    });
+
+    // 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";
@@ -1540,9 +1553,17 @@ 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();
+        });
+        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

@@ -183,6 +183,8 @@ 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_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",
@@ -205,8 +207,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",
@@ -249,6 +254,29 @@ define({
     "LIVE_DEV_STYLER_RADIUS": "Radius",
     "LIVE_DEV_STYLER_WIDTH": "Width",
     "LIVE_DEV_STYLER_COLOR": "Color",
+    "LIVE_DEV_STYLER_ON_THIS_PAGE": "On the page",
+    "LIVE_DEV_STYLER_COMMON_COLORS": "Common",
+    "LIVE_DEV_STYLER_COLOR_WHITE": "White",
+    "LIVE_DEV_STYLER_COLOR_SILVER": "Silver",
+    "LIVE_DEV_STYLER_COLOR_GRAY": "Gray",
+    "LIVE_DEV_STYLER_COLOR_BLACK": "Black",
+    "LIVE_DEV_STYLER_COLOR_RED": "Red",
+    "LIVE_DEV_STYLER_COLOR_MAROON": "Maroon",
+    "LIVE_DEV_STYLER_COLOR_ORANGE": "Orange",
+    "LIVE_DEV_STYLER_COLOR_GOLD": "Gold",
+    "LIVE_DEV_STYLER_COLOR_YELLOW": "Yellow",
+    "LIVE_DEV_STYLER_COLOR_OLIVE": "Olive",
+    "LIVE_DEV_STYLER_COLOR_LIME": "Lime",
+    "LIVE_DEV_STYLER_COLOR_GREEN": "Green",
+    "LIVE_DEV_STYLER_COLOR_TEAL": "Teal",
+    "LIVE_DEV_STYLER_COLOR_CYAN": "Cyan",
+    "LIVE_DEV_STYLER_COLOR_BLUE": "Blue",
+    "LIVE_DEV_STYLER_COLOR_NAVY": "Navy",
+    "LIVE_DEV_STYLER_COLOR_INDIGO": "Indigo",
+    "LIVE_DEV_STYLER_COLOR_PURPLE": "Purple",
+    "LIVE_DEV_STYLER_COLOR_MAGENTA": "Magenta",
+    "LIVE_DEV_STYLER_COLOR_VIOLET": "Violet",
+    "LIVE_DEV_STYLER_COLOR_PINK": "Pink",
     "LIVE_DEV_STYLER_STYLE": "Style",
     "LIVE_DEV_STYLER_SOLID": "Solid",
     "LIVE_DEV_STYLER_DASHED": "Dashed",
@@ -710,6 +738,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",