From d57a4655a6a2c2b1e0a79f1886ce02b5846f7783 Mon Sep 17 00:00:00 2001 From: huanghongxun Date: Sat, 7 Aug 2021 14:30:55 +0800 Subject: [PATCH] perf: try to speed up css style lookup. --- .../java/org/jackhuang/hmcl/ui/LogWindow.java | 1 + .../ui/construct/AdvancedListItemSkin.java | 37 +--- .../hmcl/ui/construct/PopupMenu.java | 2 +- .../hmcl/ui/construct/TwoLineListItem.java | 12 +- HMCL/src/main/resources/assets/css/root.css | 207 +++--------------- 5 files changed, 57 insertions(+), 202 deletions(-) diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/LogWindow.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/LogWindow.java index 7b1c450bc..249527463 100644 --- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/LogWindow.java +++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/LogWindow.java @@ -276,6 +276,7 @@ public final class LogWindow extends Stage { listView.setStyle("-fx-font-family: " + config().getFontFamily() + "; -fx-font-size: " + config().getFontSize() + "px;"); listView.setCellFactory(x -> new ListCell() { { + getStyleClass().add("log-window-list-cell"); Region clippedContainer = (Region)listView.lookup(".clipped-container"); if (clippedContainer != null) { maxWidthProperty().bind(clippedContainer.widthProperty()); diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListItemSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListItemSkin.java index dfe414b05..074a73bd1 100644 --- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListItemSkin.java +++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListItemSkin.java @@ -19,12 +19,9 @@ package org.jackhuang.hmcl.ui.construct; import javafx.css.PseudoClass; import javafx.geometry.Pos; -import javafx.scene.control.Label; import javafx.scene.control.SkinBase; import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox; -import javafx.scene.layout.StackPane; -import javafx.scene.layout.VBox; import org.jackhuang.hmcl.ui.FXUtils; public class AdvancedListItemSkin extends SkinBase { @@ -33,40 +30,25 @@ public class AdvancedListItemSkin extends SkinBase { public AdvancedListItemSkin(AdvancedListItem skinnable) { super(skinnable); - StackPane stackPane = new StackPane(); - stackPane.getStyleClass().add("container"); - RipplerContainer container = new RipplerContainer(stackPane); - FXUtils.onChangeAndOperate(skinnable.activeProperty(), active -> { skinnable.pseudoClassStateChanged(SELECTED, active); }); BorderPane root = new BorderPane(); + root.getStyleClass().add("container"); root.setPickOnBounds(false); + RipplerContainer container = new RipplerContainer(root); + HBox left = new HBox(); left.setAlignment(Pos.CENTER_LEFT); left.setMouseTransparent(true); - VBox vbox = new VBox(); - root.setCenter(vbox); - vbox.setMouseTransparent(true); - vbox.setAlignment(Pos.CENTER_LEFT); - - Label title = new Label(); - title.textProperty().bind(skinnable.titleProperty()); - title.getStyleClass().add("title"); - vbox.getChildren().add(title); - - Label subtitle = new Label(); - subtitle.textProperty().bind(skinnable.subtitleProperty()); - subtitle.getStyleClass().add("subtitle"); - vbox.getChildren().add(subtitle); - - FXUtils.onChangeAndOperate(skinnable.subtitleProperty(), subtitleString -> { - if (subtitleString == null) vbox.getChildren().setAll(title); - else vbox.getChildren().setAll(title, subtitle); - }); + TwoLineListItem item = new TwoLineListItem(); + root.setCenter(item); + item.setMouseTransparent(true); + item.titleProperty().bind(skinnable.titleProperty()); + item.subtitleProperty().bind(skinnable.subtitleProperty()); FXUtils.onChangeAndOperate(skinnable.leftGraphicProperty(), newGraphic -> { @@ -95,9 +77,6 @@ public class AdvancedListItemSkin extends SkinBase { FXUtils.onChangeAndOperate(skinnable.actionButtonVisibleProperty(), visible -> root.setRight(visible ? right : null)); - stackPane.setPickOnBounds(false); - stackPane.getChildren().setAll(root); - getChildren().setAll(container); } } diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/PopupMenu.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/PopupMenu.java index a149cc922..027ffa7ef 100644 --- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/PopupMenu.java +++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/PopupMenu.java @@ -83,7 +83,7 @@ public class PopupMenu extends Control { .otherwise(ScrollPane.ScrollBarPolicy.AS_NEEDED)); VBox content = new VBox(); - content.getStyleClass().add("content"); + content.getStyleClass().add("popup-menu-content"); Bindings.bindContent(content.getChildren(), PopupMenu.this.getContent()); scrollPane.setContent(content); diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java index 6a8ce025a..c0600fef7 100644 --- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java +++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java @@ -25,6 +25,7 @@ import javafx.collections.ObservableList; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; +import org.jackhuang.hmcl.ui.FXUtils; import org.jackhuang.hmcl.util.javafx.MappedObservableList; public class TwoLineListItem extends VBox { @@ -68,7 +69,16 @@ public class TwoLineListItem extends VBox { lblSubtitle.getStyleClass().add("subtitle"); lblSubtitle.textProperty().bind(subtitle); - getChildren().setAll(firstLine, lblSubtitle); + HBox secondLine = new HBox(); + secondLine.getChildren().setAll(lblSubtitle); + + getChildren().setAll(firstLine, secondLine); + + FXUtils.onChangeAndOperate(subtitle, subtitleString -> { + if (subtitleString == null) getChildren().setAll(firstLine); + else getChildren().setAll(firstLine, secondLine); + }); + getStyleClass().add(DEFAULT_STYLE_CLASS); } diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css index d8255a082..455f07843 100644 --- a/HMCL/src/main/resources/assets/css/root.css +++ b/HMCL/src/main/resources/assets/css/root.css @@ -24,8 +24,8 @@ .scroll-bar .thumb { -fx-fill: rgba(255, 255, 255, 0.5); - -fx-arc-width: 5px; - -fx-arc-height: 5px; + -fx-arc-width: 0; + -fx-arc-height: 0; } .disabled Label { @@ -60,37 +60,31 @@ -fx-text-fill: -fx-base-text-fill; } -.advanced-list-item .container { +.advanced-list-item > .rippler-container > .container { -fx-padding: 10 16 10 16; -fx-background-color: null; } -.advanced-list-item .container VBox { +.advanced-list-item > .rippler-container > .container > .two-line-list-item { + -fx-alignment: center-left; -fx-padding: 0 0 0 10; } -.advanced-list-item .container .image-container { - -fx-max-width: 32; - -fx-min-width: 32; - -fx-max-height: 32; - -fx-min-height: 32; -} - -.advanced-list-item .container .title { +.advanced-list-item > .rippler-container > .container > .two-line-list-item > HBox > .title { -fx-font-size: 13; -fx-text-alignment: justify; } -.advanced-list-item .container .subtitle { +.advanced-list-item > .rippler-container > .container > .two-line-list-item > HBox > .subtitle { -fx-font-size: 10; -fx-text-alignment: justify; } -.advanced-list-item:selected .container { +.advanced-list-item:selected > .rippler-container > .container { -fx-background-color: -fx-base-rippler-color; } -.advanced-list-item:selected .container .title { +.advanced-list-item:selected > .rippler-container > .container > .two-line-list-item > HBox > .title { -fx-text-fill: -fx-base-color; -fx-font-weight: bold; } @@ -99,27 +93,27 @@ -fx-fill: -fx-base-color; } -.navigation-drawer-item .container VBox { +.navigation-drawer-item > .rippler-container > .container > VBox { -fx-padding: 0 0 0 0; } -.navigation-drawer-item .two-line-list-item .title { +.profile-list-item > .rippler-container > BorderPane > .two-line-list-item > HBox > .title { -fx-font-size: 13; } -.navigation-drawer-item .two-line-list-item .subtitle { +.profile-list-item > .rippler-container > BorderPane > .two-line-list-item > HBox > .subtitle { -fx-font-size: 10; } -.profile-list-item BorderPane { +.profile-list-item > .rippler-container > BorderPane { -fx-padding: 8 0 8 16; } -.profile-list-item:selected BorderPane { +.profile-list-item:selected > .rippler-container > BorderPane { -fx-background-color: -fx-base-rippler-color; } -.profile-list-item:selected .two-line-list-item .title { +.profile-list-item:selected > .rippler-container > BorderPane > .two-line-list-item > HBox .title { -fx-text-fill: -fx-base-color; -fx-font-weight: bold; } @@ -178,25 +172,25 @@ -fx-fill: rgba(0, 0, 0, 0.5); } -.popup-menu .content { +.popup-menu-content { -fx-padding: 4 0 4 0; } -.two-line-list-item HBox { +.two-line-list-item > HBox { -fx-spacing: 8; -fx-alignment: center-left; } -.two-line-list-item .title { +.two-line-list-item > HBox > .title { -fx-text-fill: #292929; -fx-font-size: 15px; } -.two-line-list-item .subtitle { +.two-line-list-item > HBox > .subtitle { -fx-text-fill: rgba(0, 0, 0, 0.5); } -.two-line-list-item .tag { +.two-line-list-item > HBox > HBox > .tag { -fx-text-fill: -fx-base-color; -fx-background-color: -fx-base-rippler-color; -fx-padding: 2; @@ -208,8 +202,8 @@ -fx-text-fill: white; } -.bubble .two-line-list-item > .title, -.bubble .two-line-list-item > .subtitle { +.bubble > HBox > .two-line-list-item > HBox > .title, +.bubble > HBox > .two-line-list-item > HBox > .subtitle { -fx-text-fill: white; } @@ -218,7 +212,7 @@ -fx-cursor: hand; } -.sponsor-pane .label { +.sponsor-pane > .label { -fx-wrap-text: true; } @@ -228,23 +222,23 @@ * * ******************************************************************************/ -.launch-pane .jfx-button { +.launch-pane > .jfx-button { -fx-background-color: -fx-base-color; -fx-cursor: hand; } -.launch-pane .jfx-button .jfx-rippler { +.launch-pane > .jfx-button > StackPane > .jfx-rippler { -jfx-rippler-fill: white; -jfx-mask-type: CIRCLE; -fx-padding: 0.0; } -.launch-pane .jfx-button, .jfx-button * { +.launch-pane > .jfx-button, .jfx-button * { -fx-text-fill: -fx-base-text-fill; -fx-font-size: 14px; } -.launch-pane Rectangle { +.launch-pane > Rectangle { -fx-fill: -fx-base-darker-color; } @@ -274,30 +268,12 @@ -fx-padding: 10 17 10 17; } -/******************************************************************************* - * * - * JFX Drawer * - * * - ******************************************************************************/ - -.jfx-drawer-overlay-pane { - -fx-background-color: rgba(0.0, 0.0, 0.0, 0.1) -} - -.jfx-drawer-side-pane { - -fx-background-color: WHITE; -} - /******************************************************************************* * * * JFX Dialog Layout * * * ******************************************************************************/ -.jfx-dialog-overlay-pane { - -fx-background-color: rgba(0.0, 0.0, 0.0, 0.1); -} - .dialog-trigger { -fx-background-color: WHITE; -jfx-button-type: RAISED; @@ -321,7 +297,7 @@ -fx-wrap-text: true; } -.jfx-layout-body .label { +.jfx-layout-body > .label { -fx-font-size: 14.0px; -fx-pref-width: 400.0px; -fx-wrap-text: true; @@ -392,62 +368,6 @@ -fx-cursor: hand; } -.icons-rippler { - -jfx-rippler-fill: #FE774D; - -jfx-mask-type: CIRCLE; -} - -.icons-rippler1 { - -jfx-rippler-fill: #4285F4; - -jfx-mask-type: CIRCLE; -} - -.icons-rippler:hover { - -fx-cursor: hand; -} - -.animated-burgers .jfx-hamburger StackPane { - -fx-background-color: -fx-base-color; - -fx-background-radius: 4px; -} - -.animated-burgers .jfx-rippler { - -jfx-rippler-fill: -fx-base-color; -} - -.icons-badge .badge-pane { - -fx-background-color: #ff4081; - -fx-background-radius: 23; - -fx-pref-width: 23; - -fx-pref-height: 23; - -fx-alignment: center; -} - -.icons-badge Label { - -fx-font-weight: BOLD; - -fx-font-size: 14.0px; - -fx-text-fill: WHITE; -} - -/******************************************************************************* -* * -* JFX Hamburger Icon * -* * -*******************************************************************************/ - -.jfx-hamburger { - -fx-padding: 10.0; - -fx-spacing: 4px; - -fx-cursor: hand; -} - -.jfx-hamburger StackPane { - -fx-pref-width: 30px; - -fx-pref-height: 4px; - -fx-background-color: #FFF; - -fx-background-radius: 5px; -} - /******************************************************************************* * * * JFX Tool Bar * @@ -558,17 +478,6 @@ -fx-padding: 0.0; } -.option-list-view { - -fx-pref-width: 160.0px; - -fx-background-color: WHITE; -} - -.option-jfx-list-view-icon { - -fx-fill: -fx-base-color; - -fx-padding: 0.0 10.0 0.0 5.0; - -fx-cursor: hand; -} - /******************************************************************************* * * * JFX Radio Button * @@ -877,55 +786,11 @@ -jfx-untoggle-color: transparent; } -.options-list-item-expand-button .icon { - -fx-fill: rgb(204.0, 204.0, 51.0); - -fx-padding: 10.0; -} - .options-list-item-expand-button .jfx-rippler { -jfx-rippler-fill: -fx-base-check-color; -jfx-mask-type: CIRCLE; } -/******************************************************************************* -* * -* JFX SUBLIST IMPORTANT * -* * -*******************************************************************************/ -.sublist .scroll-bar:vertical .increment-arrow, -.sublist .scroll-bar:vertical .decrement-arrow, -.sublist .scroll-bar:vertical .increment-button, -.sublist .scroll-bar:vertical .decrement-button { - -fx-padding: 0; -} - -.sublist .scroll-bar:vertical .track, -.sublist .scroll-bar:vertical .thumb { - -fx-background-color: WHITE; -} - -.sublist { - -fx-background-color: TRANSPARENT; -} - -.sublist .jfx-list-cell:odd:selected > .jfx-rippler > StackPane, -.sublist .jfx-list-cell:even:selected > .jfx-rippler > StackPane { - -fx-background-color: rgba(255, 0, 0, 0.2); -} - -.sublist .jfx-list-cell { - -fx-background-insets: 0.0; - -fx-text-fill: BLACK; -} - -.sublist-header { - -fx-alignment: center-left; -} - -.sublist-header .sub-label { - -fx-padding: 0 0 0 12; -} - /******************************************************************************* * * * JFX Toggle Button * @@ -1075,37 +940,37 @@ -fx-fill: rgba(0, 0, 0, 0.5); } -.log-window .list-cell { +.log-window-list-cell { -fx-text-fill: black; -fx-border-width: 0 0 1 0; -fx-border-color: #dddddd; } -.log-window .list-cell:empty { +.log-window-list-cell:empty { -fx-border-width: 0; } -.log-window .list-cell:fatal { +.log-window-list-cell:fatal { -fx-background-color: #F7A699; } -.log-window .list-cell:error { +.log-window-list-cell:error { -fx-background-color: #FFCCBB; } -.log-window .list-cell:warn { +.log-window-list-cell:warn { -fx-background-color: #FFEECC; } -.log-window .list-cell:info { +.log-window-list-cell:info { -fx-background-color: #FFFFFF; } -.log-window .list-cell:debug { +.log-window-list-cell:debug { -fx-background-color: #EEE9E0; } -.log-window .list-cell:trace { +.log-window-list-cell:trace { -fx-background-color: #EEE9E0; }