Replace inline styles with CSS classes by AnasKh21 · Pull Request #15694 · JabRef/jabref

AnasKh21 · 2026-05-07T02:29:59Z

Related issues and pull requests

PR Description

This PR replaces several inline setStyle(...) calls with CSS style classes in order to move styling logic from Java code into the theme files.

After running a grep search for color-related setStyle(...) calls, only two files remained:

--> WelcomeTab.java
--> ChatMessageComponent.java

I intentionally did not modify them because WelcomeTab.java already contains a comment explaining that a CSS class was insufficient in that specific case, and ChatMessageComponent.java uses dynamically generated colors. Since I am still relatively new to JavaFX and the project's styling system, I preferred not to touch the more complex cases to avoid accidentally breaking existing behavior.

Apart from these two files, I made sure that all remaining color-related inline styles were replaced with CSS classes. I also replaced most of the simpler setStyle(...) calls related to padding, alignment, font weight, and similar properties.

Steps to test

1- Run JabRef locally.
2 - Switch between light and dark themes.
3 - Open the affected UI areas and verify that the styling and layout still behave correctly.

Checklist

I own the copyright of the code submitted and I license it under the MIT license
I manually tested my changes in running JabRef (always required)
[/] I added JUnit tests for changes (if applicable)
I added screenshots in the PR description (if change is visible to the user)
I added a screenshot in the PR description showing a library with a single entry with me as author and as title the issue number
[/] I described the change in CHANGELOG.md in a way that can be understood by the average user (if change is visible to the user)
[/] I checked the user documentation for up to dateness and submitted a pull request to our user documentation repository

qodo-free-for-open-source-projects · 2026-05-07T02:30:22Z

Review Summary by Qodo

Replace inline styles with CSS classes for better maintainability

✨ Enhancement

Walkthroughs

Description

• Replace inline setStyle() calls with CSS classes across multiple UI components
• Move styling logic from Java code into centralized theme CSS file
• Add new CSS classes for common styling patterns (bold, padding, alignment)
• Improve maintainability by consolidating style definitions in one location

Diagram

flowchart LR
  A["Java Components<br/>setStyle calls"] -- "Replace with<br/>getStyleClass.add" --> B["CSS Classes"]
  B -- "Define in" --> C["jabref-theme.css"]
  C -- "Applied to" --> D["UI Components<br/>CitationKeyPatternsPanel<br/>LatexCitationsTab<br/>CitationRelationsTab<br/>MainTable<br/>FileSelectionPage"]

File Changes

1. jabgui/src/main/java/org/jabref/gui/commonfxcontrols/CitationKeyPatternsPanel.java ✨ Enhancement +10/-8

Replace inline row styling with CSS class

jabgui/src/main/java/org/jabref/gui/commonfxcontrols/CitationKeyPatternsPanel.java

2. jabgui/src/main/java/org/jabref/gui/entryeditor/LatexCitationsTab.java ✨ Enhancement +5/-5

Replace multiple inline styles with CSS classes

jabgui/src/main/java/org/jabref/gui/entryeditor/LatexCitationsTab.java

3. jabgui/src/main/java/org/jabref/gui/entryeditor/citationrelationtab/CitationRelationsTab.java ✨ Enhancement +5/-5

Replace alignment and padding styles with CSS classes

jabgui/src/main/java/org/jabref/gui/entryeditor/citationrelationtab/CitationRelationsTab.java

View more (6)

4. jabgui/src/main/java/org/jabref/gui/externalfiles/FileSelectionPage.java ✨ Enhancement +2/-2

Replace progress pane and label styles with CSS

jabgui/src/main/java/org/jabref/gui/externalfiles/FileSelectionPage.java

5. jabgui/src/main/java/org/jabref/gui/externalfiles/ImportResultsPage.java ✨ Enhancement +2/-2

Replace progress pane and summary label styles

jabgui/src/main/java/org/jabref/gui/externalfiles/ImportResultsPage.java

6. jabgui/src/main/java/org/jabref/gui/maintable/MainTableColumnFactory.java ✨ Enhancement +3/-3

Replace column alignment and padding inline styles

jabgui/src/main/java/org/jabref/gui/maintable/MainTableColumnFactory.java

7. jabgui/src/main/java/org/jabref/gui/texparser/ParseLatexResultView.java ✨ Enhancement +1/-1

Replace reference text fill style with CSS class

jabgui/src/main/java/org/jabref/gui/texparser/ParseLatexResultView.java

8. jabgui/src/main/java/org/jabref/gui/util/TextFlowLimited.java ✨ Enhancement +1/-1

Replace more link background color with CSS class

jabgui/src/main/java/org/jabref/gui/util/TextFlowLimited.java

9. jabgui/src/main/resources/org/jabref/gui/jabref-theme.css ✨ Enhancement +62/-0

Add new CSS classes for styling patterns

jabgui/src/main/resources/org/jabref/gui/jabref-theme.css

qodo-free-for-open-source-projects · 2026-05-07T02:30:23Z

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (1) 📎 Requirement gaps (0)

Context used

✅ Tickets: 🎫 Replace all `setStyle(..)` calls with proper styleClasses

1. Trivial comments in updateItem 📘 Rule violation ⚙ Maintainability

Description

New comments in HighlightTableRow.updateItem restate what the code already makes obvious
(removing/adding a style class). This reduces signal-to-noise and violates the guideline that
comments should explain rationale (“why”), not narrate behavior.

Code

jabgui/src/main/java/org/jabref/gui/commonfxcontrols/CitationKeyPatternsPanel.java[R128-136]

+            // Style used to highlight the default entry type row
            super.updateItem(item, empty);
-            if (item == null || item.getEntryType() == null) {
-                setStyle("");
-            } else if (isSelected()) {
-                setStyle("-fx-background-color: -fx-selection-bar");
-            } else if (CitationKeyPatternsPanelViewModel.ENTRY_TYPE_DEFAULT_NAME.equals(item.getEntryType().getName())) {
-                setStyle("-fx-background-color: -fx-default-button");
-            } else {
-                setStyle("");
+
+            getStyleClass().remove(DEFAULT_ROW_STYLE_CLASS);
+            // Reapply the style only for the default entry type row
+            if (item != null
+                    && item.getEntryType() != null
+                    && CitationKeyPatternsPanelViewModel.ENTRY_TYPE_DEFAULT_NAME.equals(item.getEntryType().getName())) {
+                getStyleClass().add(DEFAULT_ROW_STYLE_CLASS);

Evidence

PR Compliance ID 7 requires that added comments explain intent/rationale rather than trivially
restating code. The added comments (Style used to highlight..., Reapply the style...) directly
narrate the subsequent style-class operations without adding additional rationale.

AGENTS.md
jabgui/src/main/java/org/jabref/gui/commonfxcontrols/CitationKeyPatternsPanel.java[128-136]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`HighlightTableRow.updateItem` adds comments that restate obvious behavior (adding/removing a CSS class) rather than explaining rationale.

## Issue Context
Per codebase conventions, comments should focus on the “why” (constraints, non-obvious reasons) and avoid narrating self-explanatory code.

## Fix Focus Areas
- jabgui/src/main/java/org/jabref/gui/commonfxcontrols/CitationKeyPatternsPanel.java[128-136]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Maran23

Overall looks good, some comments and suggestions.

After running a grep search for color-related setStyle(...) calls, only two files remained:

--> WelcomeTab.java
--> ChatMessageComponent.java

This is fine. ChatMessageComponent is reworked anyway currently. And WelcomeTab might be a good follow up. Because I think this can be solved with a styleClass, but need to be investigated.

Maran23 · 2026-05-07T13:02:42Z

-            if (item == null || item.getEntryType() == null) {
-                setStyle("");
-            } else if (isSelected()) {
-                setStyle("-fx-background-color: -fx-selection-bar");


This style is not set anymore, isn't it? Is there a reason for it?

I checked it again and from what I understood, JavaFX already applies the selected row styling automatically for table rows through the existing selection CSS.

When I tested it locally, the selected row was still highlighted correctly even after removing the inline setStyle(...), so it seemed safe to remove this one as well.

Maran23 · 2026-05-07T13:03:31Z

    /// @param tooltipText tooltip text
    private void styleLabel(Label label, String tooltipText) {
-        label.setStyle("-fx-padding: 5px");
+        label.getStyleClass().add("padded-label");


I would recommend to name this to padding-5px, so that it is clear this sets a 5px padding. Since we might have more variants at one point.

Maran23 · 2026-05-07T13:04:16Z

        hBox.getChildren().add(link);
        hBox.setSpacing(2d);
-        hBox.setStyle("-fx-alignment: center;");
+        hBox.getStyleClass().add("centered-container");


I would recommend something like alignment-center, which also follows frameworks like tailwind, so developers will understand it much better

or even shorter, we could do align-center

Maran23 · 2026-05-07T13:04:53Z

        Tooltip.install(header, new Tooltip(MainTableColumnModel.Type.INDEX.getDisplayName()));
        column.setGraphic(header);
-        column.setStyle("-fx-alignment: CENTER-RIGHT;");
+        column.getStyleClass().add("right-aligned-column");


alignment-center-right

or even shorter, we could do align-center-right

Maran23 · 2026-05-07T13:05:15Z

                .withGraphic(this::createGroupColorRegion)
                .install(column);
-        column.setStyle("-fx-padding: 0 0 0 0;");
+        column.getStyleClass().add("main-table-column-no-padding");


maybe just padding-0 ?

Maran23 · 2026-05-07T21:59:27Z

Also found 3 locations where styleProperty() is used. Could you use take a look at them?

AnasKh21 · 2026-05-09T02:47:49Z

I took a look at the remaining styleProperty() usages. From what I understood, they are a bit different from the fixed inline setStyle(...) calls because they are tied to dynamic bindings and animations.

I read a bit about possible alternatives like pseudo-classes, but since I’m still learning the codebase and getting familiar with contributing to JabRef, I preferred to keep this PR focused and avoid introducing regressions in more dynamic UI behavior.

I’d definitely be interested in revisiting those later once I better understand the JavaFX styling patterns used in the project.

Maran23 · 2026-05-09T12:15:48Z

I took a look at the remaining styleProperty() usages. From what I understood, they are a bit different from the fixed inline setStyle(...) calls because they are tied to dynamic bindings and animations.

I read a bit about possible alternatives like pseudo-classes, but since I’m still learning the codebase and getting familiar with contributing to JabRef, I preferred to keep this PR focused and avoid introducing regressions in more dynamic UI behavior.

I’d definitely be interested in revisiting those later once I better understand the JavaFX styling patterns used in the project.

Fine for me!

Maran23

Some changes are still pending.

Note: My rationale by reusing the same styleClass like padding-0 is so that our CSS file is smaller and we have less clutter and more generic styleClassess, which makes it much more maintainable.

Maran23 · 2026-05-09T12:16:58Z

+    -fx-padding: 5px;
+}
+
+#citationRelationsTab .align-center {


just .align-center without the #citationRelationsTab

Maran23 · 2026-05-09T12:17:23Z


 /* CitationRelationsTab */

+#citationRelationsTab .padding-5px {


just .padding-5px without the #citationRelationsTab (so it is standalone and reusable)

Maran23 · 2026-05-09T12:17:45Z

+    -fx-font-weight: bold;
+}
+
+#entryEditor .latex-citations-box {


Remove and use padding-0 instead in code

Maran23 · 2026-05-09T12:18:09Z

        VBox vBox = new VBox();
        vBox.getChildren().add(progressIndicator);
-        vBox.setStyle("-fx-alignment: center;");
+        vBox.getStyleClass().add("centered-container");


align-center

Maran23 · 2026-05-09T12:18:12Z

        vBox.getChildren().add(label);
        vBox.setSpacing(2d);
-        vBox.setStyle("-fx-alignment: center;");
+        vBox.getStyleClass().add("centered-container");


align-center

Maran23 · 2026-05-09T12:18:15Z

        hBox.getChildren().add(link);
        hBox.setSpacing(2d);
-        hBox.setStyle("-fx-alignment: center;");
+        hBox.getStyleClass().add("centered-container");


align-center

Maran23

Looks good, thanks! Will create a follow up soon for styleProperty and Welcome section.

Maran23 · 2026-05-10T01:11:13Z

Congratulations on your first accepted pull request at JabRef!

* upstream/main: (21 commits) chore(deps): update dependency com.konghq:unirest-modules-gson to v4.10.0 (JabRef#15715) Add manual tests (JabRef#15351) Refactored the comments for UnlinkedFilesCrawler (JabRef#15709) Replace inline styles with CSS classes (JabRef#15694) add test case for multiple authors in csl citaiton (JabRef#15707) fix invalid desktop file for linux (JabRef#15702) Change FileKeystore and Folder fields to disable/enable (JabRef#15685) Chore(deps): Bump org.openrewrite.recipe:rewrite-recipe-bom from 3.30.0 to 3.30.1 (JabRef#15696) New Crowdin updates (JabRef#15693) Chore(deps): Bump dev.langchain4j:langchain4j-bom in /versions (JabRef#15698) Chore(deps): Bump org.apache.logging.log4j:log4j-to-slf4j in /versions (JabRef#15700) chore(deps): update dependency org.apache.logging.log4j:log4j-to-slf4j to v2.26.0 (JabRef#15699) Chore(deps): Bump org.openrewrite.rewrite from 7.32.1 to 7.32.2 (JabRef#15697) Chore(deps): Bump jablib/src/main/resources/csl-locales (JabRef#15689) Fix month checker regex (JabRef#15678) Chore(deps): Bump com.dlsc.gemsfx:gemsfx in /versions (JabRef#15692) Chore(deps): Bump org.hisp.dhis:json-tree in /versions (JabRef#15691) Chore(deps): Bump jablib/src/main/resources/csl-styles (JabRef#15690) New Crowdin updates (JabRef#15687) Chore(deps): Bump com.konghq:unirest-java-core in /versions (JabRef#15683) ...

Replace inline styles with CSS classes

b86ade0

github-actions Bot added good first issue An issue intended for project-newcomers. Varies in difficulty. component: ui component: css status: no-bot-comments labels May 7, 2026

github-actions Bot mentioned this pull request May 7, 2026

Replace all setStyle(..) calls with proper styleClasses #15686

Closed

Maran23 self-requested a review May 7, 2026 13:00

Maran23 reviewed May 7, 2026

View reviewed changes

Address review feedback

9bce549

Maran23 requested changes May 9, 2026

View reviewed changes

github-actions Bot added status: changes-required Pull requests that are not yet complete and removed status: no-bot-comments labels May 9, 2026

Made CSS classes more reusable

db1079c

github-actions Bot added status: no-bot-comments and removed status: changes-required Pull requests that are not yet complete labels May 9, 2026

Maran23 approved these changes May 10, 2026

View reviewed changes

Maran23 added this pull request to the merge queue May 10, 2026

github-actions Bot added the status: to-be-merged PRs which are accepted and should go into the merge-queue. label May 10, 2026

Merged via the queue into JabRef:main with commit fc14b60 May 10, 2026
53 checks passed


		/* CitationRelationsTab */

		#citationRelationsTab .padding-5px {

Uh oh!

Conversation

AnasKh21 commented May 7, 2026

Related issues and pull requests

PR Description

Steps to test

Checklist

Uh oh!

qodo-free-for-open-source-projects Bot commented May 7, 2026

Review Summary by Qodo

Walkthroughs

File Changes

Uh oh!

qodo-free-for-open-source-projects Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

Maran23 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Maran23 May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Maran23 commented May 7, 2026

Uh oh!

AnasKh21 commented May 9, 2026

Uh oh!

Maran23 commented May 9, 2026

Uh oh!

Maran23 left a comment

Choose a reason for hiding this comment

Uh oh!

Maran23 May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Maran23 May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Maran23 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Maran23 commented May 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

qodo-free-for-open-source-projects Bot commented May 7, 2026 •

edited

Loading

Maran23 May 7, 2026 •

edited

Loading

Maran23 May 9, 2026 •

edited

Loading

Maran23 May 9, 2026 •

edited

Loading