8374822: Platform media query

[mstr2]

Add the -fx-platform media query (similar to -moz-platform in Firefox) that allows applications to switch styles based on the operating system on which the application is running.

/reviewers 2
/csr

---

• I confirm that I make this contribution in accordance with the OpenJDK Interim AI Policy.

---

Progress

• Change must not contain extraneous whitespace
• Commit message must refer to an issue
• Change must be properly reviewed (2 reviews required, with at least 1 Reviewer, 1 Author)
• Change requires CSR request JDK-8386998 to be approved

Issues

• JDK-8374822: Platform media query (Enhancement - P4)
• JDK-8386998: Platform media query (CSR)

Reviewers

• Marius Hanl (@Maran23 - Committer)
• Andy Goryachev (@andy-goryachev-oracle - Reviewer)

Reviewing

Using git

Checkout this PR locally:
$ git fetch https://git.openjdk.org/jfx.git pull/2193/head:pull/2193
$ git checkout pull/2193

Update a local copy of the PR:
$ git checkout pull/2193
$ git pull https://git.openjdk.org/jfx.git pull/2193/head

Using Skara CLI tools

Checkout this PR locally:
$ git pr checkout 2193

View PR using the GUI difftool:
$ git pr show -t 2193

Using diff file

Download this PR as a diff file:
https://git.openjdk.org/jfx/pull/2193.diff

Using Webrev

Link to Webrev Comment

[bridgekeeper]

👋 Welcome back mstrauss! A progress list of the required criteria for merging this PR into master will be added to the body of your pull request. There are additional pull request commands available for use with this pull request.

[openjdk]

@mstr2 This change now passes all automated pre-integration checks.

ℹ️ This project also has non-automated pre-integration requirements. Please see the file CONTRIBUTING.md for details.

After integration, the commit message for the final commit will be:

8374822: Platform media query

Reviewed-by: mhanl, angorya

You can use pull request commands such as /summary, /contributor and /issue to adjust it as needed.

At the time when this comment was updated there had been 5 new commits pushed to the master branch:

• edf20b5: 8387119: Tests for ScrollEvent redirection
• e84b145: 8372398: [macOS] Shown ContextMenu does not close when macOS system menu is clicked
• 3306add: 8387020: StyleManagerTest#testSetApplicationUserAgentStylesheetFromDataURI does not correctly reset the Application user agent stylesheet
• ... and 2 more: https://git.openjdk.org/jfx/compare/8020a8595426c475ee29a1d09f0abdde6a58e1cf...master

As there are no conflicts, your changes will automatically be rebased on top of these commits when integrating. If you prefer to avoid this automatic rebasing, please check the documentation for the /integrate command for further details.

➡️ To integrate this PR with the above commit message to the master branch, type /integrate in a new comment.

[openjdk]

@mstr2
The total number of required reviews for this PR (including the jcheck configuration and the last /reviewers command) is now set to 2 (with at least 1 Reviewer, 1 Author).

[openjdk]

@mstr2 has indicated that a compatibility and specification (CSR) request is needed for this pull request.

@mstr2 please create a CSR request for issue JDK-8374822 with the correct fix version. This pull request cannot be integrated until the CSR request is approved.

[mlbridge]

Webrevs

• 03: Full - Incremental (8c41cbe2)
• 02: Full - Incremental (222f7ec0)
• 01: Full - Incremental (4448f289)
• 00: Full (d5398bcd)

[Maran23]

Looks good and the logic is very similar to the previous ConditionalFeature PR: #2161

I also like the change that the DEFAULT variable is not public anymore (I commented on that back in the Conditional stylesheet imports PR: #2031 (comment)).

Conceptually, it is a bit strange to have unix as a standalone platform. It seems to include the Linux and Solaris platform when looking into PlatformUtil. But not Mac, which is also a Unix platform and even Unix certified AFAIK.

So that might be something we should have a look at before baking it into the new -fx-platform API. If Solaris is not important anymore, we could probably replace isUnix with isLinux (only used 2 times in prod code).

[mstr2]

Conceptually, it is a bit strange to have unix as a standalone platform. It seems to include the Linux and Solaris platform when looking into PlatformUtil. But not Mac, which is also a Unix platform and even Unix certified AFAIK.

So that might be something we should have a look at before baking it into the new -fx-platform API. If Solaris is not important anymore, we could probably replace isUnix with isLinux (only used 2 times in prod code).

You're right, let's remove "unix" for now because its semantics are unclear. It's not even used in CSS, and we can always add it later if we see the need to do so.

[andy-goryachev-oracle]

I am not using these features, preferring to build stylesheets programmatically, so please forgive my silly question:

Should the platform media query be tied to a particular look and feel instead of the hardware platform? While it makes sense in many areas to have things like PlatformUtil.isMac() as a general guidance (like popup trigger on the mouse press instead of mouse release, or the use of command key vs ctrl key), we might have more than one look and feel per platform. Boomer example: Windows 98 vs Windows Vista vs Windows 10 vs Windows 11 might need somewhat different stylesheets, or various desktop environments on Linux.

[mstr2]

I am not using these features, preferring to build stylesheets programmatically, so please forgive my silly question:

Should the platform media query be tied to a particular look and feel instead of the hardware platform? While it makes sense in many areas to have things like PlatformUtil.isMac() as a general guidance (like popup trigger on the mouse press instead of mouse release, or the use of command key vs ctrl key), we might have more than one look and feel per platform. Boomer example: Windows 98 vs Windows Vista vs Windows 10 vs Windows 11 might need somewhat different stylesheets, or various desktop environments on Linux.

Good question. I think that themes shouldn't excessively change styles based on the platform, because that's a very broad category. On the web, you'll see a trend of moving to finer-grained capabilities (for example, prefers-color-scheme or pointer: fine) instead of using the platform as a decision proxy. The reason that I'm proposing to add -fx-platform is not so much that I think themes should be doing more of these tests, especially not new themes. This media query is a relatively crude helper that allows us to define the old Caspian and Modena themes in CSS without hard-coded optional stylesheets.

In an earlier revision of this media query, I've had sub-categories like windows-11, linux-gnome, and so on. If we find out in the future that there's an absolutely compelling need to have these sub-categories, we can add them. For the moment, I think that just supporting the minimum feature set that Caspian and Modena actually use is the safer choice.

[andy-goryachev-oracle]

what does embedded mean in this context?
is an embedded linux a linux or embedded?

maybe just remove it, like unix?

[Maran23]

The problem is that a stylesheet is loaded when embedded is true.

jfx/modules/javafx.graphics/src/main/java/com/sun/javafx/application/PlatformImpl.java

Lines 789 to 792 in edf20b5

	// when running on embedded add a extra stylesheet to tune performance of modena theme
	if (PlatformUtil.isEmbedded()) {
	uaStylesheets.add("com/sun/javafx/scene/control/skin/modena/modena-embedded-performance.css");
	}

So it is needed to replace that. As far as I understand, embedded is like headless, a platform that can be used together with e.g. linux. You could just set the system property (like we do for our headless tests) and it will match the platform.

[Maran23]

Good question. I think that themes shouldn't excessively change styles based on the platform, because that's a very broad category. On the web, you'll see a trend of moving to finer-grained capabilities (for example, prefers-color-scheme or pointer: fine) instead of using the platform as a decision proxy. The reason that I'm proposing to add -fx-platform is not so much that I think themes should be doing more of these tests, especially not new themes. This media query is a relatively crude helper that allows us to define the old Caspian and Modena themes in CSS without hard-coded optional stylesheets.

I agree with your point. However, I think it's worth noting that on the desktop side, there are legitimate use cases beyond refining Modena and Caspian for the platform media query.

The distinction here is that browsers already provide the native look and feel (header bar, window controls), and the website lives inside the browser. I'm not aware of a common use case where websites aim to look different on each OS (And unstyled HTML also usually does not match the native look and feel).
Desktop applications, on the other hand, are the top-level window - so matching the native look and feel is a much more common and valid goal.

And there are already community projects with such themes, one example is JMetro.

So I think the use case for platform queries is valid and will make it easy to change some CSS variables or things like the HeaderBar (+icons) rather than requiring programmatic stylesheet switching or other workarounds.

[mstr2]

I've decided to remove both embedded and headless, so the platform query now only detects the actual OS on which JavaFX is running. I think this is simpler than overloading -fx-platform with JavaFX concepts like what counts as an embedded platform.

Of course, as @Maran23 pointed out, the current themes do switch stylesheets based on whatever "embedded" means. However, the "embedded" stylesheet does nothing more than remove -fx-effect from all kinds of controls. This is obviously very crude, because there are certainly embedded devices that are not too slow to render effects.

I think that we should instead add the update media query for this purpose, which matches slow for severely under-powered devices. That would be better than using -fx-platform: embedded to mean "remove effects".

[andy-goryachev-oracle]

Should there be another, catch-all case where the platform does not fit the linux/macos/windows triad? Solaris, for example?

Also, the CSR will need to be updated, and perhaps it should contain some explanation of the case when the platform does not map to the three defined choices.

[Maran23]

Looks good.
CSR need to be updated.

[Maran23]

Should there be another, catch-all case where the platform does not fit the linux/macos/windows triad? Solaris, for example?

I think this should be requirement-driven. If there is a need for another platform like Solaris, someone will likely file an issue or post in the mailing list at one point.

[andy-goryachev-oracle]

I agree with the sentiment, my question was "what happens". It will not evaluate the @media block with any of the declared values, correct? Should it be mentioned in the cssref.html, or is it self-evident?

[Maran23]

I agree with the sentiment, my question was "what happens". It will not evaluate the @media block with any of the declared values, correct? Should it be mentioned in the cssref.html, or is it self-evident?

Ahh got you, yes, it will match none in this case. Similar as for -fx-supports-conditional-feature, where they can be media queries that will not match (like web, if it is not on the classpath).

I think thats why Michael said it should not be excessively used.
If no platform match, good default values should be used.

Btw., adding to what I wrote above regarding theming the application based on the OS and this comment, there is actually one usecase in JavaFX where things are different depending of the OS:

jfx/modules/javafx.controls/src/main/java/javafx/scene/control/ButtonBar.java

Lines 475 to 487 in edf20b5

	final boolean buttonOrderEmpty = buttonOrder == null || buttonOrder.isEmpty();
	if (Utils.isMac()) {
	setButtonOrder(buttonOrderEmpty ? BUTTON_ORDER_MAC_OS : buttonOrder);
	setButtonMinWidth(70);
	} else if (Utils.isUnix()) {
	setButtonOrder(buttonOrderEmpty ? BUTTON_ORDER_LINUX : buttonOrder);
	setButtonMinWidth(85);
	} else {
	// windows by default
	setButtonOrder(buttonOrderEmpty ? BUTTON_ORDER_WINDOWS : buttonOrder);
	setButtonMinWidth(75);
	}

Which shows how I think -fx-platform should be used as well: Have a good default and may change the theming inside specialized platform media queries when needed.

@mstr2 unrelated to this PR, do you think the code in ButtonBar is a candidate that we should rather solve with the platform media queries instead?

[andy-goryachev-oracle]

All the explanations make sense, thanks!

[mstr2]

I think we can define linux as "Unix, but not macOS and not Android" so that it includes systems like Solaris. From a UI perspective, there's no need to differentiate between different flavors of Unix, so long as all of those flavors use our GTK pipeline.

Calling the feature value unix would be confusing, because it doesn't match for unix-like systems where our rendering platform is not GTK. And from a developer perspective, I think "linux" is generally understood to also include systems with different branding.

The developers of Firefox also chose those semantics with the same rationale:

pub enum Platform {
    /// Matches any Android version.
    Android,
    /// For our purposes here, "linux" is just "gtk" (so unix-but-not-mac).
    /// There's no need for our front-end code to differentiate between those
    /// platforms and they already use the "linux" string elsewhere (e.g.,
    /// toolkit/themes/linux).
    Linux,
    /// Matches any iOS version.
    Ios,
    /// Matches any macOS version.
    Macos,
    /// Matches any Windows version.
    Windows,
}

[mstr2]

@mstr2 unrelated to this PR, do you think the code in ButtonBar is a candidate that we should rather solve with the platform media queries instead?

Yes, this looks like a good candidate for the new media query.

[andy-goryachev-oracle]

I wonder if the GTK aspect is more important here, and also in the cssref.html?
It's not about file path separators or some such, it's about GUI toolkit, isn't it?

[mstr2]

Yes, you're right that the purpose of this media query is not so much technicalities like file separators. I'd say that it is more about the "look and feel" of the OS, and how style themes can adapt to it. In this sense, it also isn't about whether JavaFX uses GTK to show the window, or whether it uses some other way to achieve the same thing.

So it's not about GTK, but then again "linux" is also not a precisely-defined look-and-feel. However, if you conducted a survey, I think you'd find that in actual usage, "linux" does imply a certain look-and-feel, at least to an extent (because most people don't use exotic distros). And that's probably the only utility you'll get out of this particular media query.

[andy-goryachev-oracle]

Thank you for clarifications! I think is should be clear enough for everyone.

[Maran23]

Makes sense. Maybe we should rename isUnix to isLinuxOrSolaris or isUnixButNotMac.

Mostly for better readablity in the other code locations, but thats for another PR.

[mstr2]

/integrate

[openjdk]

Going to push as commit 46f2cad.
Since your change was applied there have been 5 commits pushed to the master branch:

• edf20b5: 8387119: Tests for ScrollEvent redirection
• e84b145: 8372398: [macOS] Shown ContextMenu does not close when macOS system menu is clicked
• 3306add: 8387020: StyleManagerTest#testSetApplicationUserAgentStylesheetFromDataURI does not correctly reset the Application user agent stylesheet
• ... and 2 more: https://git.openjdk.org/jfx/compare/8020a8595426c475ee29a1d09f0abdde6a58e1cf...master

Your commit was automatically rebased without conflicts.

[openjdk]

@mstr2 Pushed as commit 46f2cad.

💡 You may see a message that your pull request was closed with unmerged commits. This can be safely ignored.