From c8ce15a9baa413967a94aa8dc07440813e0cdbea Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:05:04 +0530 Subject: [PATCH 1/8] style: taller tree rows with more spacing --- src/styles/Extn-LayersPanel.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index 8f11f2953f..b5ea5d5e60 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -27,8 +27,8 @@ @layers-border: rgba(255, 255, 255, 0.09); @layers-input-bg: rgba(255, 255, 255, 0.04); @layers-input-bg-focus: rgba(255, 255, 255, 0.06); -@layers-row-height: 22px; -@layers-indent: 12px; +@layers-row-height: 26px; +@layers-indent: 14px; @layers-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; @layers-prop-name: #9cdcfe; @layers-prop-value: #ce9178; @@ -446,6 +446,7 @@ width: 16px; height: 16px; flex: none; + margin-right: 6px; color: @project-panel-text-2; svg { @@ -465,7 +466,7 @@ width: 14px; height: 14px; flex: none; - margin-right: 5px; + margin-right: 6px; color: @project-panel-text-2; svg { From e1f229afe7fd6a66e6e2bd28bbff0598e08c6bec Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:06:57 +0530 Subject: [PATCH 2/8] chore: drop unused reveal in code string --- src/nls/root/strings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 236db2b56e..3211aa4e2f 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -830,7 +830,6 @@ define({ "LIVE_PREVIEW_LAYERS_MOVE_UP": "Move Up", "LIVE_PREVIEW_LAYERS_MOVE_DOWN": "Move Down", "LIVE_PREVIEW_LAYERS_DRAG_TO_MOVE": "Drag to move", - "LIVE_PREVIEW_LAYERS_REVEAL_IN_CODE": "Reveal in Code", "LIVE_PREVIEW_LAYERS_ADD_ATTRIBUTE": "Add Attribute", "LIVE_PREVIEW_LAYERS_REMOVE_ATTRIBUTE": "Remove Attribute", "LIVE_PREVIEW_LAYERS_PROPERTIES": "Properties", From 722daf4ef0ba922a3dfb0d5479166f04778a04ca Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:10:24 +0530 Subject: [PATCH 3/8] style: plain thicker drop line --- src/styles/Extn-LayersPanel.less | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index b5ea5d5e60..0d95b06ee5 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -578,22 +578,12 @@ .layers-drop-line { position: absolute; right: 0; - height: 2px; + height: 3px; margin-top: -1px; + border-radius: 2px; background: @layers-accent; pointer-events: none; z-index: 2; - - &::before { - content: ""; - position: absolute; - left: -3px; - top: -2px; - width: 6px; - height: 6px; - border-radius: 50%; - background: @layers-accent; - } } .layers-node.layers-drop-into { From 3b2b936e3b3cdc7c94915d3636bd1e71867c7fe8 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:16:00 +0530 Subject: [PATCH 4/8] feat: one selection path for tree, keys, preview and caret --- .../documents/LiveDocument.js | 8 ++++++++ src/styles/Extn-LayersPanel.less | 19 +++---------------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js index 9d5beb6260..0d8d745063 100644 --- a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js +++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js @@ -182,6 +182,14 @@ define(function (require, exports, module) { _disableHighlightOnCursor = shouldDisable; }; + /** + * Whether live preview highlights on cursor movement are currently disabled. + * @return {boolean} + */ + LiveDocument.prototype.isCursorHighlightDisabled = function () { + return _disableHighlightOnCursor; + }; + /** * @private * Handles a cursor change in our attached editor. Updates the highlight in the browser. diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index 0d95b06ee5..e2bb40f643 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -34,8 +34,7 @@ @layers-prop-value: #ce9178; @layers-row-bg: @bc-ai-sidebar-bg; @layers-row-hover-bg: mix(#ffffff, @bc-ai-sidebar-bg, 6%); -@layers-row-select-bg: mix(#ffffff, @bc-ai-sidebar-bg, 9%); -@layers-row-focus-bg: mix(fade(@bc-sidebar-selection, 100%), @bc-ai-sidebar-bg, 30%); +@layers-row-select-bg: mix(@layers-accent, @bc-ai-sidebar-bg, 16%); .layers-tab-container { display: flex; @@ -399,16 +398,7 @@ outline: none; } - .layers-tree:focus .layers-node.layers-selected { - background: @layers-row-focus-bg; - } - - .layers-node.layers-cursor:not(.layers-selected) { - background: @layers-hover-bg; - box-shadow: inset 2px 0 0 fade(@layers-accent, 55%); - } - - .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected):not(.layers-cursor) { + .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected) { background: transparent; } @@ -436,6 +426,7 @@ &.layers-selected { background: @layers-row-select-bg; + box-shadow: inset 2px 0 0 @layers-accent; } } @@ -509,10 +500,6 @@ background: @layers-row-select-bg; } - .layers-tree:focus .layers-node.layers-selected .layers-node-actions { - background: @layers-row-focus-bg; - } - .layers-node-action { display: flex; align-items: center; From 492c22ffbbe5067039b3a0cc2c6a72cec04051a4 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:37:47 +0530 Subject: [PATCH 5/8] style: bigger tree text and icons, smaller header buttons --- src/styles/Extn-LayersPanel.less | 37 ++++++++++++++++---------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index e2bb40f643..2ba15c46fe 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -229,8 +229,8 @@ display: flex; align-items: center; justify-content: center; - width: 22px; - height: 22px; + width: 20px; + height: 20px; padding: 0; margin: 0; border: none; @@ -241,8 +241,8 @@ outline: none; svg { - width: 15px; - height: 15px; + width: 13px; + height: 13px; display: block; flex: none; } @@ -396,6 +396,7 @@ padding-bottom: 6px; min-width: min-content; outline: none; + font-size: @sidebar-content-font-size; } .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected) { @@ -441,8 +442,8 @@ color: @project-panel-text-2; svg { - width: 14px; - height: 14px; + width: 15px; + height: 15px; } } @@ -454,15 +455,15 @@ display: flex; align-items: center; justify-content: center; - width: 14px; - height: 14px; + width: 15px; + height: 15px; flex: none; margin-right: 6px; color: @project-panel-text-2; svg { - width: 14px; - height: 14px; + width: 15px; + height: 15px; display: block; } } @@ -504,8 +505,8 @@ display: flex; align-items: center; justify-content: center; - width: 18px; - height: 18px; + width: 20px; + height: 20px; padding: 0; margin: 0; border: none; @@ -517,8 +518,8 @@ flex: none; svg { - width: 12px; - height: 12px; + width: 13px; + height: 13px; display: block; } @@ -538,15 +539,15 @@ display: flex; align-items: center; justify-content: center; - width: 14px; - height: 18px; + width: 16px; + height: 20px; flex: none; color: @project-panel-text-2; cursor: grab; svg { - width: 12px; - height: 12px; + width: 13px; + height: 13px; display: block; } From a980a811b54752531cc4beb962958e9d50c50978 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 14:37:57 +0530 Subject: [PATCH 6/8] feat: expose whether the page selection came from the editor --- src/LiveDevelopment/BrowserScripts/RemoteFunctions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js index 69e5737dc1..df084c80c0 100644 --- a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js +++ b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js @@ -208,6 +208,7 @@ function RemoteFunctions(config = {}) { isElementVisible: isElementVisible, screenOffset: screenOffset, selectElement: selectElement, + isSelectedFromEditor: function () { return _selectedFromEditor; }, sendSelectionToEditor: sendSelectionToEditor, brieflyDisableHoverListeners: brieflyDisableHoverListeners, handleElementClick: handleElementClick, From a34b483f1a3718d43fdeaca86d2b550ca380e50c Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 23:41:23 +0530 Subject: [PATCH 7/8] style: unify the layers icon buttons and drop the inherited text shadow --- src/styles/Extn-LayersPanel.less | 110 ++++++++++--------------------- 1 file changed, 34 insertions(+), 76 deletions(-) diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index 2ba15c46fe..4d15c71d4e 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -36,6 +36,35 @@ @layers-row-hover-bg: mix(#ffffff, @bc-ai-sidebar-bg, 6%); @layers-row-select-bg: mix(@layers-accent, @bc-ai-sidebar-bg, 16%); +.layers-icon-button() { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0; + margin: 0; + border: none; + border-radius: 4px; + background: none; + color: @project-panel-text-2; + cursor: pointer; + outline: none; + flex: none; + + svg { + width: 13px; + height: 13px; + display: block; + flex: none; + } + + &:hover { + background: @layers-hover-bg; + color: @project-panel-text-1; + } +} + .layers-tab-container { display: flex; flex-direction: column; @@ -47,6 +76,8 @@ background-color: @bc-ai-sidebar-bg; color: @project-panel-text-1; font-size: @sidebar-small-font-size; + letter-spacing: normal; + text-shadow: none; .layers-hidden { display: none !important; @@ -226,31 +257,7 @@ } .layers-hdr-btn { - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - padding: 0; - margin: 0; - border: none; - border-radius: 4px; - background: none; - color: @project-panel-text-2; - cursor: pointer; - outline: none; - - svg { - width: 13px; - height: 13px; - display: block; - flex: none; - } - - &:hover { - background: @layers-hover-bg; - color: @project-panel-text-1; - } + .layers-icon-button(); &.layers-active { background: @layers-accent-soft; @@ -262,7 +269,6 @@ } } - .layers-section-content { position: relative; flex: 1; @@ -502,31 +508,7 @@ } .layers-node-action { - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - padding: 0; - margin: 0; - border: none; - border-radius: 3px; - background: none; - color: @project-panel-text-2; - cursor: pointer; - outline: none; - flex: none; - - svg { - width: 13px; - height: 13px; - display: block; - } - - &:hover { - background: @layers-hover-bg; - color: @project-panel-text-1; - } + .layers-icon-button(); &.layers-disabled { opacity: 0.3; @@ -746,32 +728,8 @@ } .layers-icon-btn { - display: flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - padding: 0; - margin: 0; - border: none; - border-radius: 4px; - background: none; - color: @project-panel-text-2; - cursor: pointer; - outline: none; - flex: none; + .layers-icon-button(); align-self: center; - - svg { - width: 12px; - height: 12px; - display: block; - } - - &:hover { - background: @layers-hover-bg; - color: @project-panel-text-1; - } } .layers-decl .layers-icon-btn { From aefb0185a6c7c1e89861a8ca770be013a7acee9f Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 3 Sep 2026 23:41:33 +0530 Subject: [PATCH 8/8] feat: layers caret mark, row animations and settings strings --- src/nls/root/strings.js | 3 +- src/styles/Extn-LayersPanel.less | 50 +++++++++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 3211aa4e2f..7e036024e7 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -825,8 +825,9 @@ 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_SETTINGS": "Settings", "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes", - "LIVE_PREVIEW_LAYERS_HIDE_TEXT_NODES": "Hide Text Nodes", + "LIVE_PREVIEW_LAYERS_HIGHLIGHT_ON_HOVER": "Highlight on Hover in Preview", "LIVE_PREVIEW_LAYERS_MOVE_UP": "Move Up", "LIVE_PREVIEW_LAYERS_MOVE_DOWN": "Move Down", "LIVE_PREVIEW_LAYERS_DRAG_TO_MOVE": "Drag to move", diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index 4d15c71d4e..b209b3668d 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -405,7 +405,7 @@ font-size: @sidebar-content-font-size; } - .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected) { + .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected):not(.layers-cursor) { background: transparent; } @@ -435,6 +435,25 @@ background: @layers-row-select-bg; box-shadow: inset 2px 0 0 @layers-accent; } + + &.layers-cursor { + background: @layers-hover-bg; + box-shadow: inset 2px 0 0 fade(@layers-accent, 70%); + } + + &.layers-cursor-ancestor { + box-shadow: inset 2px 0 0 fade(@layers-accent, 35%); + } + + &.layers-moving { + position: relative; + z-index: 1; + transition: transform 260ms cubic-bezier(0.2, 0, 0, 1); + } + + &.layers-spring { + animation: layers-spring-row 600ms ease-in-out; + } } .layers-twisty { @@ -507,6 +526,10 @@ background: @layers-row-select-bg; } + .layers-node.layers-cursor .layers-node-actions { + background: @layers-row-hover-bg; + } + .layers-node-action { .layers-icon-button(); @@ -868,9 +891,34 @@ body.layers-dnd-invalid { } } +@keyframes layers-spring-row { + 0%, 100% { + background-color: @layers-accent-soft; + box-shadow: inset 0 0 0 1px @layers-accent; + } + + 25%, 75% { + background-color: transparent; + box-shadow: inset 0 0 0 1px transparent; + } + + 50% { + background-color: @layers-accent-soft; + box-shadow: inset 0 0 0 1px @layers-accent; + } +} + @media (prefers-reduced-motion: reduce) { .layers-tab-container .layers-node.layers-flash { animation-duration: 1ms; background-color: fade(@layers-accent, 32%); } + + .layers-tab-container .layers-node.layers-moving { + transition: none; + } + + .layers-tab-container .layers-node.layers-spring { + animation: none; + } }