This Bugzilla instance is a read-only archive of historic NetBeans bug reports. To report a bug in NetBeans please follow the project's instructions for reporting issues.

Bug 244402 - Add "quick edit" for html tags, ids and classes as in adobe brackets
Summary: Add "quick edit" for html tags, ids and classes as in adobe brackets
Status: NEW
Alias: None
Product: web
Classification: Unclassified
Component: HTML Editor (show other bugs)
Version: 8.0
Hardware: PC Windows 7
: P3 normal (vote)
Assignee: Milutin Kristofic
Depends on:
Reported: 2014-05-09 10:55 UTC by Christian Lenz
Modified: 2017-02-28 12:19 UTC (History)
1 user (show)

See Also:
Exception Reporter:

Quick edit mode (23.69 KB, image/png)
2014-05-09 10:55 UTC, Christian Lenz
Captured quick edit mode (260.89 KB, image/gif)
2014-05-09 12:05 UTC, Christian Lenz

Note You need to log in before you can comment on or make changes to this bug.
Description Christian Lenz 2014-05-09 10:55:53 UTC
Created attachment 147203 [details]
Quick edit mode

As you can see in my screenshot, in adobe brackets I can select a tag, an id or a class, type ctrl + e and some small region comes up with the affected css for this rule.
This would be a very nice and handy feature. You can use it or not, but you don't have to switch to the css file and search for this.

If its possible to search in less or scss files too would be great.


Comment 1 Vladimir Riha 2014-05-09 11:02:24 UTC
I think this is functionality is already implemented since 7.3, if you run HTML file in browser with NetBeans integration and either 
 - turn on inspect mode and click on element in browser
 - or click on element in Browser DOM window

then CSS Styles window shows all CSS styles/properties applied to the element (including these in media queries, it can recognize rule comming from Sass/Less file as well and indication if some property is used to style the element or it is override/unused). And you can edit the CSS directly from CSS Styles
Comment 2 Christian Lenz 2014-05-09 12:04:30 UTC
It's not exactly what I want. I have to switch between windows css and dom or to the browser. For this I don't want to run the appliation. Im only in my html file, use my keyboard and dont want to switch to other views or windows or smth like that.

I have add you a gif which I captured the function that I mean. Maybe its clearer.


Comment 3 Christian Lenz 2014-05-09 12:05:55 UTC
Created attachment 147205 [details]
Captured quick edit mode
Comment 4 Christian Lenz 2014-11-03 13:16:40 UTC
A similar feature is already implemented inside IntelliJ, called 
Quick Definition and Applied Styles: The problem with this solution is, that you can't edit the quick definitions, it's read only. In brackets, it's possible. It will change the values inside the css file, on the fly.
Comment 5 Christian Lenz 2017-02-28 12:16:54 UTC
This implementation has nothing todo with running an application. The editor is aware of the classes and ids as selectors and you can jump into the source, but you switch the whole context from HTML to CSS. This should not needed. You only should see the preview of the CSS and you should be able to edit it, right inside the editor of the HTML file where the selector matches.
Comment 6 Christian Lenz 2017-02-28 12:19:46 UTC
It's more called preview definition. In other IDEs this is possible for Java, TS, HTML and so on.