Feature Request: In-line CSS editing like Brackets

[micsun-al]

One of the cool features of Brackets is the inline functionality (mainly the inline css editing).  You can put your editor cursor on some element inside the html portion of the file, press Command+E, then it brings up a little inline panel that has all the CSS that apply to it.

GWD-wise, this would be super helpful, because as a use case, we are generally running up and down the file in Code view chasing CSS that's randomly named a lot.  Some of our designers actually prefer not working in GWD mainly because trying to figure out what CSS applies to what element is such a pain with the way GWD randomly generates CSS names (mainly when conforming ads to different sizes).

Quick Edit

Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.

You open Quick Edit's inline editors by pressing Ctrl/Cmd-E when your cursor is on certain pieces of code. For example:

• In an HTML file with the cursor inside a class or id attribute (name or value) or on the tag name — Quick Edit will show you all the CSS, SCSS and LESS rules in your project that match. You can edit these rules directly inline, without ever leaving the context of the HTML file.
  • When multiple rules match, navigate among them using the list on the right side (or use Alt-Up/Down).
  • To create a new CSS rule directly from the inline editor, click the New Rule button (or press Ctrl-Alt-N/Cmd-Opt-N).
• In any file with a hex color or rgb/rgba/hsl/hsla color — Quick Edit opens an inline color picker for previewing and adjusting the color. The color picker also lists the top most-used colors from other parts of the file for quick access.
• In a JavaScript file with the cursor on a function name — Quick Edit will show you the function's body (even if it's in a different file).
• In a CSS/LESS/SCSS file with the cursor on a cubic-bezier() or steps() transition timing function — Quick Edit opens a graphical transition curve editor. Pre-defined timing functionsease, ease-in, ease-out, ease-in-out, step-start, and step-end are also valid starting points.