From ee90814949c2cfaf270eb164fd1bec609878071d Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 15 Jun 2026 23:47:09 +0530 Subject: [PATCH 1/3] feat: add option to toggle visibility of styles bar --- src/LiveDevelopment/LivePreviewConstants.js | 2 ++ src/LiveDevelopment/main.js | 9 +++++++++ .../Phoenix-live-preview/main.js | 12 +++++++++++- src/nls/root/strings.js | 5 +++++ 4 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/LiveDevelopment/LivePreviewConstants.js b/src/LiveDevelopment/LivePreviewConstants.js index ecfc9a95db..487fef3f44 100644 --- a/src/LiveDevelopment/LivePreviewConstants.js +++ b/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"; }); diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index ad2598addb..336dd8b44a 100644 --- a/src/LiveDevelopment/main.js +++ b/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; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 2a9e9e4152..589e972dba 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/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); diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 5f14bc121a..05eb8c8ba1 100644 --- a/src/nls/root/strings.js +++ b/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", From f3d12f99d3dff3a7a05bf3b15d7d16c91bc76dc5 Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 15 Jun 2026 23:58:36 +0530 Subject: [PATCH 2/3] feat: styles bar dock position should be saved across reloads --- src/LiveDevelopment/LivePreviewConstants.js | 2 ++ src/LiveDevelopment/main.js | 9 +++++++++ src/extensionsIntegrated/Phoenix-live-preview/main.js | 11 +++++++++++ src/nls/root/strings.js | 1 + 4 files changed, 23 insertions(+) diff --git a/src/LiveDevelopment/LivePreviewConstants.js b/src/LiveDevelopment/LivePreviewConstants.js index 487fef3f44..3a99822b77 100644 --- a/src/LiveDevelopment/LivePreviewConstants.js +++ b/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"; }); diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js index 336dd8b44a..ba9ef2d3cc 100644 --- a/src/LiveDevelopment/main.js +++ b/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; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 589e972dba..71604883d3 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/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); diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 05eb8c8ba1..43b522f723 100644 --- a/src/nls/root/strings.js +++ b/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", From d86d88da5f279568309ee2c208386270f97f51a0 Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 16 Jun 2026 17:22:35 +0530 Subject: [PATCH 3/3] feat: show common color examples --- src/nls/root/strings.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 43b522f723..9a596f3b70 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -254,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",