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, 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/nls/root/strings.js b/src/nls/root/strings.js index 236db2b56e..7e036024e7 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -825,12 +825,12 @@ 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", - "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", diff --git a/src/styles/Extn-LayersPanel.less b/src/styles/Extn-LayersPanel.less index 8f11f2953f..b209b3668d 100644 --- a/src/styles/Extn-LayersPanel.less +++ b/src/styles/Extn-LayersPanel.less @@ -27,15 +27,43 @@ @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; @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-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; @@ -48,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; @@ -227,31 +257,7 @@ } .layers-hdr-btn { - display: flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - padding: 0; - margin: 0; - border: none; - border-radius: 4px; - background: none; - color: @project-panel-text-2; - cursor: pointer; - outline: none; - - svg { - width: 15px; - height: 15px; - display: block; - flex: none; - } - - &:hover { - background: @layers-hover-bg; - color: @project-panel-text-1; - } + .layers-icon-button(); &.layers-active { background: @layers-accent-soft; @@ -263,7 +269,6 @@ } } - .layers-section-content { position: relative; flex: 1; @@ -397,15 +402,7 @@ padding-bottom: 6px; min-width: min-content; 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%); + font-size: @sidebar-content-font-size; } .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected):not(.layers-cursor) { @@ -436,6 +433,26 @@ &.layers-selected { 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; } } @@ -446,11 +463,12 @@ width: 16px; height: 16px; flex: none; + margin-right: 6px; color: @project-panel-text-2; svg { - width: 14px; - height: 14px; + width: 15px; + height: 15px; } } @@ -462,15 +480,15 @@ display: flex; align-items: center; justify-content: center; - width: 14px; - height: 14px; + width: 15px; + height: 15px; flex: none; - margin-right: 5px; + margin-right: 6px; color: @project-panel-text-2; svg { - width: 14px; - height: 14px; + width: 15px; + height: 15px; display: block; } } @@ -508,36 +526,12 @@ background: @layers-row-select-bg; } - .layers-tree:focus .layers-node.layers-selected .layers-node-actions { - background: @layers-row-focus-bg; + .layers-node.layers-cursor .layers-node-actions { + background: @layers-row-hover-bg; } .layers-node-action { - display: flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - padding: 0; - margin: 0; - border: none; - border-radius: 3px; - background: none; - color: @project-panel-text-2; - cursor: pointer; - outline: none; - flex: none; - - svg { - width: 12px; - height: 12px; - display: block; - } - - &:hover { - background: @layers-hover-bg; - color: @project-panel-text-1; - } + .layers-icon-button(); &.layers-disabled { opacity: 0.3; @@ -550,15 +544,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; } @@ -577,22 +571,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 { @@ -767,32 +751,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 { @@ -931,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; + } }