Skip to content

Improved support for layers panel with adding styles selector support #3194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devvaannsh wants to merge 13 commits into
base: main
Choose a base branch
from
+512 −252
Open

Improved support for layers panel with adding styles selector support #3194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f754717
fix: simplify insert element picker
devvaannsh Sep 11, 2026
cc2333c
feat: highlight styles save target
devvaannsh Sep 11, 2026
e4f8354
feat: add styles from layers panel
devvaannsh Sep 11, 2026
ed12ec6
feat: copy and paste styles
devvaannsh Sep 11, 2026
df69488
fix: clean up layer selection
devvaannsh Sep 11, 2026
de23923
feat: improve style value editing
devvaannsh Sep 11, 2026
4d549ad
fix: keep add style button visible
devvaannsh Sep 11, 2026
7b6dd07
feat: add isNamedSelection api to identify the click source
devvaannsh Sep 13, 2026
8e0fe91
fix: improve numeric value editing support
devvaannsh Sep 13, 2026
d3fe284
feat: better insert element ui
devvaannsh Sep 13, 2026
6dcebde
feat: remove redundant add style feature
devvaannsh Sep 13, 2026
442f4c9
feat: move inline style editing to the header section
devvaannsh Sep 13, 2026
b693c5a
feat: improved copy paste support
devvaannsh Sep 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@ function RemoteFunctions(config = {}) {
screenOffset: screenOffset,
selectElement: selectElement,
isSelectedFromEditor: function () { return _selectedFromEditor; },
isNamedSelection: _isNamedSelection,
sendSelectionToEditor: sendSelectionToEditor,
brieflyDisableHoverListeners: brieflyDisableHoverListeners,
handleElementClick: handleElementClick,
Expand Down
9 changes: 5 additions & 4 deletions src/extensions/default/InlineColorEditor/ColorEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ define(function (require, exports, module) {
tinycolor = brackets.getModule("thirdparty/tinycolor");

/** Mustache template that forms the bare DOM structure of the UI */
var ColorEditorTemplate = require("text!ColorEditorTemplate.html");
var ColorEditorTemplate = require("text!./ColorEditorTemplate.html");

/**
* @const @type {number}
Expand Down Expand Up @@ -131,9 +131,10 @@ define(function (require, exports, module) {

this._redoColor = null;
this._isUpperCase = PreferencesManager.get("uppercaseColors");
PreferencesManager.on("change", "uppercaseColors", function () {
this._handleUppercaseColorsChange = function () {
this._isUpperCase = PreferencesManager.get("uppercaseColors");
}.bind(this));
}.bind(this);
PreferencesManager.on("change", "uppercaseColors", this._handleUppercaseColorsChange);

this.$colorValue = this.$element.find(".color-value");
this.$buttonList = this.$element.find("ul.button-bar");
Expand Down Expand Up @@ -270,7 +271,7 @@ define(function (require, exports, module) {
* Remove any preference listeners before destroying the editor.
*/
ColorEditor.prototype.destroy = function () {
PreferencesManager.off("change", "uppercaseColors");
PreferencesManager.off("change", "uppercaseColors", this._handleUppercaseColorsChange);
};

/**
Expand Down
14 changes: 13 additions & 1 deletion src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,6 +828,18 @@ define({
"LIVE_PREVIEW_LAYERS_SCRIPT_GENERATED": "Generated by script, not in the source file",
"LIVE_PREVIEW_LAYERS_TAG_TOOLTIP": "Show Tag Name Tooltip",
"LIVE_PREVIEW_LAYERS_INSERT_ELEMENT": "Insert Element",
"LIVE_PREVIEW_LAYERS_CHANGE_COLOR": "Change color",
"LIVE_PREVIEW_LAYERS_COPY_DECLARATION": "Copy property",
"LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy rule",
"LIVE_PREVIEW_LAYERS_PASTE_PROPERTIES": "Paste properties",
"LIVE_PREVIEW_LAYERS_PASTE": "Paste",
"LIVE_PREVIEW_LAYERS_STYLES_MENU_HINT": "Right-click to copy or paste styles",
"LIVE_PREVIEW_LAYERS_PASTE_INVALID": "Paste CSS properties or one complete selector at a time.",
"LIVE_PREVIEW_LAYERS_PASTE_FAILED": "Couldn’t paste these properties. Try again.",
"LIVE_PREVIEW_LAYERS_PASTED": "Properties pasted into {0}",
"LIVE_PREVIEW_LAYERS_COPY_FAILED": "Couldn’t copy these styles. Try again.",
"LIVE_PREVIEW_LAYERS_ADD_INLINE_STYLE": "Add Inline Style",
"LIVE_PREVIEW_LAYERS_INSERT_POSITION": "Placement",
"LIVE_PREVIEW_LAYERS_INSERT_INTO_PAGE": "Add to the page",
"LIVE_PREVIEW_LAYERS_INSERT_LOADING": "Loading elements…",
"LIVE_PREVIEW_LAYERS_INSERT_UNAVAILABLE": "The live preview did not answer. Try again in a moment.",
Expand All @@ -836,7 +848,7 @@ define({
"LIVE_PREVIEW_LAYERS_EMPTY_PAGE_PROPERTIES": "The page is empty. Add an element to see its properties.",
"LIVE_PREVIEW_LAYERS_EMPTY_PAGE_STYLES": "The page is empty. Add an element to see its styles.",
"LIVE_PREVIEW_LAYERS_SHOW_SELECTED": "Show the selected element",
"LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust, double-click to edit",
"LIVE_PREVIEW_LAYERS_SCRUB_HINT": "Drag to adjust. Scroll or use arrow keys while editing. Shift: larger steps, Alt: smaller steps",
"LIVE_PREVIEW_LAYERS_PROPERTY_PLACEHOLDER": "property",
"LIVE_PREVIEW_LAYERS_VALUE_PLACEHOLDER": "value",

Expand Down
Loading
Loading