perf: try to speed up css style lookup.

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<Log>() {
                     {
+                        getStyleClass().add("log-window-list-cell");
                         Region clippedContainer = (Region)listView.lookup(".clipped-container");
                         if (clippedContainer != null) {
                             maxWidthProperty().bind(clippedContainer.widthProperty());

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<AdvancedListItem> {
@@ -33,40 +30,25 @@ public class AdvancedListItemSkin extends SkinBase<AdvancedListItem> {
     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();
+        TwoLineListItem item = new TwoLineListItem();
-        root.setCenter(vbox);
+        root.setCenter(item);
-        vbox.setMouseTransparent(true);
+        item.setMouseTransparent(true);
-        vbox.setAlignment(Pos.CENTER_LEFT);
+        item.titleProperty().bind(skinnable.titleProperty());
-
+        item.subtitleProperty().bind(skinnable.subtitleProperty());
-        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);
-        });
 
         FXUtils.onChangeAndOperate(skinnable.leftGraphicProperty(),
                 newGraphic -> {
@@ -95,9 +77,6 @@ public class AdvancedListItemSkin extends SkinBase<AdvancedListItem> {
         FXUtils.onChangeAndOperate(skinnable.actionButtonVisibleProperty(),
                 visible -> root.setRight(visible ? right : null));
 
-        stackPane.setPickOnBounds(false);
-        stackPane.getChildren().setAll(root);
-
         getChildren().setAll(container);
     }
 }

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);
 

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);
     }
 

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-width: 0;
-    -fx-arc-height: 5px;
+    -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 {
+.advanced-list-item > .rippler-container > .container > .two-line-list-item > HBox > .title {
-    -fx-max-width: 32;
-    -fx-min-width: 32;
-    -fx-max-height: 32;
-    -fx-min-height: 32;
-}
-
-.advanced-list-item .container .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 > HBox > .two-line-list-item > HBox > .title,
-.bubble .two-line-list-item > .subtitle {
+.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;
 }