feat(gui): Better looking error console (#13783)

* feat(gui): Better looking error console

* fix: Remove a trivial comments

* fix: OpenRewrite

* correct fxml

---------

Co-authored-by: Siedlerchr <[email protected]>

Author: Yubo-Cao

jabgui/src/main/java/org/jabref/gui/errorconsole/ErrorConsoleView.java

@@ -3,6 +3,7 @@
 import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
+import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.ButtonType;
 import javafx.scene.control.ContentDisplay;
@@ -79,19 +80,21 @@ private void initialize() {
 
     private Callback<ListView<LogEventViewModel>, ListCell<LogEventViewModel>> createCellFactory() {
         return cell -> new ListCell<>() {
-            private HBox graphic;
-            private Node icon;
-            private VBox message;
-            private Label heading;
-            private Label stacktrace;
+            private final HBox graphic;
+            private final VBox message;
+            private final Label heading;
+            private final Label stacktrace;
 
             {
-                graphic = new HBox(10);
+                graphic = new HBox();
                 heading = new Label();
                 stacktrace = new Label();
                 message = new VBox();
+                message.setAlignment(Pos.CENTER_LEFT);
                 message.getChildren().setAll(heading, stacktrace);
+                message.getStyleClass().add("message-box");
                 setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+                getStyleClass().add("error-console-cell");
             }
 
             @Override
@@ -101,10 +104,17 @@ public void updateItem(LogEventViewModel event, boolean empty) {
                 if ((event == null) || empty) {
                     setGraphic(null);
                 } else {
-                    icon = event.getIcon().getGraphicNode();
+                    Node icon = event.getIcon().getGraphicNode();
                     heading.setText(event.getDisplayText());
                     heading.getStyleClass().setAll(event.getStyleClass());
-                    stacktrace.setText(event.getStackTrace().orElse(""));
+                    event.getStackTrace().ifPresentOrElse(text -> {
+                        stacktrace.setText(text);
+                        stacktrace.setVisible(true);
+                        stacktrace.setManaged(true);
+                    }, () -> {
+                        stacktrace.setVisible(false);
+                        stacktrace.setManaged(false);
+                    });
                     graphic.getStyleClass().setAll(event.getStyleClass());
                     graphic.getChildren().setAll(icon, message);
                     setGraphic(graphic);

jabgui/src/main/resources/org/jabref/gui/Base.css

@@ -2148,47 +2148,69 @@ We want to have a look that matches our icons in the tool-bar */
 }
 
 /* ErrorConsole */
-
 #errorConsole .list-content {
-    -fx-padding: 0.625em;
+    -fx-padding: 0em;
 }
 
 #errorConsole .info-section {
-    -fx-padding: 0.625em;
-    -fx-background-color: -fx-background;
+    -fx-graphic-text-gap: 0.8em;
+    -fx-font-size: 1.1em;
+    -fx-line-spacing: 0.2em;
+    -fx-padding: 0.6em 1em;
+    -fx-background-color: -jr-transparent-accent;
+}
+
+#errorConsole .button-bar {
+    -fx-padding: 1em 0em 0em 0em;
 }
 
-#errorConsole .info-section .glyph-icon {
-    -fx-font-size: 24.0;
+#errorConsole .error-console-cell {
+    -fx-padding: 0.6em 1em;
+}
+
+#errorConsole .error-console-cell HBox {
+    -fx-spacing: 0.8em;
+}
+
+#errorConsole .message-box {
+    -fx-spacing: 0.5em;
+}
+
+#errorConsole .info-section .glyph-icon,
+#errorConsole .exception .glyph-icon,
+#errorConsole .output .glyph-icon,
+#errorConsole .log .glyph-icon
+{
+    -fx-font-size: 1.5em;
 }
 
 #errorConsole .exception .glyph-icon {
-    -fx-font-size: 18.0;
-    -fx-fill: -jr-error;
+    -fx-icon-color: -jr-error;
 }
 
 #errorConsole .output .glyph-icon {
-    -fx-font-size: 18.0;
-    -fx-fill: -jr-warn;
+    -fx-icon-color: -jr-warn;
 }
 
 #errorConsole .log .glyph-icon {
-    -fx-font-size: 18.0;
-    -fx-fill: -jr-info;
+    -fx-icon-color: -jr-info;
 }
 
-#errorConsole .custom-buttons {
-    -fx-padding: 0.312em;
+/* Poor readability on -jr-accent. See: https://webaim.org/resources/contrastchecker/?fcolor=9E4C00&bcolor=A3B7E6 */
+#errorConsole .error-console-cell:selected .exception .glyph-icon {
+    -fx-icon-color: derive(-jr-error, -50%);
 }
 
-#errorConsole .exception {
-    -fx-text-fill: -fx-text-base-color;
+#errorConsole .error-console-cell:selected .output .glyph-icon {
+    -fx-icon-color: derive(-jr-warn, -50%);
 }
 
-#errorConsole .output {
-    -fx-text-fill: -fx-text-base-color;
+#errorConsole .error-console-cell:selected .log .glyph-icon {
+    -fx-icon-color: derive(-jr-info, -50%);
 }
 
+#errorConsole .exception,
+#errorConsole .output,
 #errorConsole .log {
     -fx-text-fill: -fx-text-base-color;
 }

jabgui/src/main/resources/org/jabref/gui/errorconsole/ErrorConsole.fxml

@@ -15,7 +15,7 @@
     </content>
     <header>
         <Label fx:id="descriptionLabel" styleClass="info-section"
-               text="%We now give you insight into the inner workings of JabRef's internals. This information might be helpful to diagnose the root cause of a problem. Please feel free to inform the developers about an issue."
+               text="%The event log displays information regarding JabRef's internal processes. This data can be useful for debugging. If you encounter a problem, please consider reporting it to the development team."
                wrapText="true"/>
     </header>
     <buttonTypes>

jablib/src/main/resources/l10n/JabRef_en.properties

@@ -1788,7 +1788,7 @@ Loading\ built\ in\ lists=Loading built in lists
 JabRef\ built\ in\ list=JabRef built in list
 
 Event\ log=Event log
-We\ now\ give\ you\ insight\ into\ the\ inner\ workings\ of\ JabRef\'s\ internals.\ This\ information\ might\ be\ helpful\ to\ diagnose\ the\ root\ cause\ of\ a\ problem.\ Please\ feel\ free\ to\ inform\ the\ developers\ about\ an\ issue.=We now give you insight into the inner workings of JabRef\'s internals. This information might be helpful to diagnose the root cause of a problem. Please feel free to inform the developers about an issue.
+The\ event\ log\ displays\ information\ regarding\ JabRef's\ internal\ processes.\ This\ data\ can\ be\ useful\ for\ debugging.\ If\ you\ encounter\ a\ problem,\ please\ consider\ reporting\ it\ to\ the\ development\ team.=The event log displays information regarding JabRef's internal processes. This data can be useful for debugging. If you encounter a problem, please consider reporting it to the development team.
 Log\ copied\ to\ clipboard.=Log copied to clipboard.
 Copy\ Log=Copy Log
 Clear\ Log=Clear Log