Hi,
> -----Original Message----- > From: Kevin Rushforth [mailto:kevin.rushfo...@oracle.com] > Sent: Monday, August 15, 2016 6:02 PM > To: David Grieve > Cc: Daniel Glöckner; openjfx-dev@openjdk.java.net > Subject: Re: Structuring CSS Stylesheets > > One slight correction on how to contribute below. > > > David Grieve wrote: > > > > > > On 8/15/16 10:52 AM, Daniel Glöckner wrote: > >>>> We found the culprits by patching the JRE, adding some statistics > >>>> to SimpleSelector and CompoundSelector. I was wondering whether > >>>> there are easier ways but anyway, it works ;) > >>> This sounds like some code that would be good to share with the > >>> community. :) > >> [DG] Sure thing. It's not too complicated and doesn't use external > >> libs. Any hint where I could post it / paste it? > > See https://wiki.openjdk.java.net/display/OpenJFX/Community for how to > > contribute > > That page is just a placeholder, and finding what you need in the sub-pages a > bit tricky. See the following page for how to contribute: > > http://openjdk.java.net/contribute/ > > -- Kevin > > > >> need them, for example our UI component factory would add table.css > >> to a TableView's list of stylesheets (tv. > >> getStylesheets().add("/path/to/table.css"). > >> The global theme.css would be minimal and only define colors and fonts. > >>>> What do you think about this approach? Will this work nicely with > >>>> caching of > >>> CSS styles in JavaFX? > >>> I think if you are going to go this route, you might want to use > >>> Region#getUserAgentStylesheets() which adds the styles as user-agent > >>> styles. > >>> But I don't think it will buy you much in terms of CSS performance. > >> [DG] We also want to control / override the CSS of standard JavaFX > >> controls like TreeTableView. Ideally we don't need to sub class them > >> so we would need to use parent. getStylesheets().add(), right? > > I doubt that getUserAgentStylesheets() or getStylesheets() is going to > > have much impact. My guess is that having the stylesheets added to the > > scene is going to be your best bet. I say this because the code that > > does the style matching has to combine styles together from > > Region#getUserAgentStylesheets() and Parent#getStylesheets(), whereas > > the styles from scene stylesheets are already combined. You have to > > think of these different sources of styles as sets of styles. When you > > have Region or Parent stylesheets, you have to create a union of those > > styles with the default user-agent stylesheets (e.g., caspian.css). > > With just scene stylesheets, you have just one set (this isn't 100% > > accurate, but close enough for this discussion). OK. So if we're talking about performance it might be a good idea to add the CSS to the scene and make sure that all CSS selectors are efficient. > > > >>> If you the biggest bang for your buck relative to JavaFX CSS > >>> performance, avoid style lookup and relative font sizes. > >> [DG] Could you explain what you mean by "avoid style lookups"? > > You know about styles like '-fx-base' used in caspian.css. You change > > the color for -fx-base and the basic colors of the UI change. This > > magic happens at runtime. So if I have a label in a cell in a table, > > and it has a style "-fx-border-color: -fx-base", JavaFX will - at > > runtime - try to resolve -fx-base into an actual color. It starts at > > the leaf and looks tries to resolve -fx-base. If it can't resolve it, > > it looks for a style in the parent node, and so on up the parent-chain > > all the way to the root node. The worst case scenario, then, is that > > there are no styles that resolve the value until you get to .root. > > > > This is what I mean by 'style lookups'. > > > > Its great stuff (the brainchild of Jasper Potts) because I can change > > the look of my UI just by setting '-fx-base'. But if I were developing > > a UI and I didn't care to let the users of my UI make such changes, > > I'd go through and remove all the lookups in caspian.css (not trivial > > because there are many many lookups - not just -fx-base). Or use a > > pre-processor such as SASS or LESS. > > > > The same sort of lookup happens when you have an em (or other relative > > size) because you need a font or a font-size to complete the > > calculation. In most cases, the lookup for a font or font-size goes > > all the way to .root, where it fails and falls back on > > Font.getDefault(). But its a trade off since em sizes let your UI more > > easily scale to different displays. > > Thanks a lot for the in-depth explanation. We're using a lot of style lookups in our CSS, mostly to define colors similar to -fx-base in your example. We will look at using a preprocessor as you suggested. This was anyway on our TODO list to be able to support user specific font sizes.
