From a035c55428c6d9b39ae81d221979be5b6f797b29 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 27 Aug 2026 14:15:07 +0530 Subject: [PATCH 1/3] feat: layers panel button styles and strings --- .../Phoenix-live-preview/live-preview.css | 17 +++++++++++++++++ src/nls/root/strings.js | 2 ++ 2 files changed, 19 insertions(+) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index cfc18c4e57..0b441dd511 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -428,6 +428,23 @@ color: #FBB03B; } +#livePreviewLayersBtn { + border: 1px solid transparent; + border-radius: 3px; +} + +#live-preview-plugin-toolbar #livePreviewLayersBtn:hover, +#live-preview-plugin-toolbar #livePreviewLayersBtn:focus, +#live-preview-plugin-toolbar #livePreviewLayersBtn:active { + border-color: var(--lp-toolbar-border) !important; + background: transparent !important; + box-shadow: none !important; +} + +#livePreviewLayersBtn.selected { + color: #FBB03B; +} + .lp-mode-dropdown-chevron, .lp-device-size-dropdown-chevron { display: flex; diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 08b8a9eeac..7edae12a2b 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -775,6 +775,7 @@ define({ "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project", "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro", "DEVICE_SIZE_LIMIT_MESSAGE": "To switch between mobile, tablet, and desktop views, upgrade to Phoenix Pro.", + "LAYERS_PANEL_LIMIT_MESSAGE": "To see your page structure and select or edit any element in it, upgrade to Phoenix Pro.", "DEVICE_SIZE_NOT_ENOUGH_SPACE": "This screen doesn’t fit in the current window size — try expanding the window", "DEVICE_SIZE_CYCLE_NO_FIT": "Screen too small to switch to another device size — increase the window size", "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop", @@ -809,6 +810,7 @@ define({ "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", + "LIVE_PREVIEW_LAYERS_PANEL": "Toggle Layers Panel", "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened", "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser", From 1755e544e5746d6a386e9cb72e83788d7a2c3596 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 28 Aug 2026 18:05:41 +0530 Subject: [PATCH 2/3] feat: add strings for element section in layers panel --- src/nls/root/strings.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 7edae12a2b..6aa9227978 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -811,6 +811,22 @@ define({ "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", "LIVE_PREVIEW_LAYERS_PANEL": "Toggle Layers Panel", + "LIVE_PREVIEW_LAYERS_PANEL_TITLE": "Layers Panel", + "LIVE_PREVIEW_LAYERS_DOCK_LEFT": "Dock to Left", + "LIVE_PREVIEW_LAYERS_DOCK_RIGHT": "Dock to Right", + "LIVE_PREVIEW_LAYERS_ELEMENTS": "Elements", + "LIVE_PREVIEW_LAYERS_DETAILS": "Details", + "LIVE_PREVIEW_LAYERS_SEARCH": "Search elements", + "LIVE_PREVIEW_LAYERS_REFRESH": "Refresh Elements", + "LIVE_PREVIEW_LAYERS_NO_ELEMENTS": "No elements to show", + "LIVE_PREVIEW_LAYERS_NO_MATCHES": "No matching elements", + "LIVE_PREVIEW_LAYERS_TRUNCATED": "Showing the first {0} elements", + "LIVE_PREVIEW_LAYERS_COLLAPSE_ALL": "Collapse All", + "LIVE_PREVIEW_LAYERS_EXPAND_LEVEL": "Expand to Level", + "LIVE_PREVIEW_LAYERS_LEVEL": "Level {0}", + "LIVE_PREVIEW_LAYERS_LEVEL_ALL": "All Levels", + "LIVE_PREVIEW_LAYERS_MORE_OPTIONS": "More Options", + "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes", "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened", "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser", From a75a20ab45c4536d7920f28a869188243b25369c Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 28 Aug 2026 19:38:28 +0530 Subject: [PATCH 3/3] feat: add strings for details section in layers panel --- src/nls/root/strings.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 6aa9227978..606b9df27b 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -817,7 +817,6 @@ define({ "LIVE_PREVIEW_LAYERS_ELEMENTS": "Elements", "LIVE_PREVIEW_LAYERS_DETAILS": "Details", "LIVE_PREVIEW_LAYERS_SEARCH": "Search elements", - "LIVE_PREVIEW_LAYERS_REFRESH": "Refresh Elements", "LIVE_PREVIEW_LAYERS_NO_ELEMENTS": "No elements to show", "LIVE_PREVIEW_LAYERS_NO_MATCHES": "No matching elements", "LIVE_PREVIEW_LAYERS_TRUNCATED": "Showing the first {0} elements", @@ -825,8 +824,16 @@ define({ "LIVE_PREVIEW_LAYERS_EXPAND_LEVEL": "Expand to Level", "LIVE_PREVIEW_LAYERS_LEVEL": "Level {0}", "LIVE_PREVIEW_LAYERS_LEVEL_ALL": "All Levels", - "LIVE_PREVIEW_LAYERS_MORE_OPTIONS": "More Options", "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes", + "LIVE_PREVIEW_LAYERS_HIDE_TEXT_NODES": "Hide Text Nodes", + "LIVE_PREVIEW_LAYERS_TAB_PROPERTIES": "Properties", + "LIVE_PREVIEW_LAYERS_TAB_STYLES": "Styles", + "LIVE_PREVIEW_LAYERS_NO_SELECTION": "Select an element to see its details", + "LIVE_PREVIEW_LAYERS_NOT_IN_SOURCE": "This element is not in the source file", + "LIVE_PREVIEW_LAYERS_NO_STYLES": "No styles applied", + "LIVE_PREVIEW_LAYERS_OPEN_SOURCE": "Open in editor", + "LIVE_PREVIEW_LAYERS_RULE_INACTIVE": "Not active in the current state", + "LIVE_PREVIEW_LAYERS_EDIT_STYLE": "Edit in Styles Bar", "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened", "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser",