Scroll bar missing

[koppor]

[AEgit]

1. Regarding the topic mentioned here: Is this supposed to be a vertical or a horizontal scroll bar?

2. I don't know whether I should open a separate issue or whether this fits here. The scroll bar of the groups panel in the current development version is invisible when the mouse cursor is not hovered over it and barely visible when the mouse cursor touches it. This is due to the following issues:
   a) Choice of colour for scroll bar and scroll bar column (both have the same grey colour when the mouse does not touch the scroll bar).
   b) Very small scroll bar when there are many (i. e. thousands) groups.

A simple solution would be to just display the scroll bar in a different shade of grey all the time instead of only when the mouse cursor touches it.

[AEgit]

JabRef 5.0-dev--snapshot--2019-09-26--master--1a6c92c79
Windows 10 10.0 amd64
Java 11.0.4-bellsoft

Here I provide three example pictures to showcase what I mean:

Mouse cursor does not touch the scroll bar:

Mouse cursor touches the scroll bar (lower picture - scroll bar emphasized - as I said, the scroll bar is really tiny for large databases):

[tobiasdiez]

I agree the color for the scrollbars should be changed.

jabref/src/main/java/org/jabref/gui/Base.css

Lines 89 to 91 in 631cec5

	/* Specs for the scrollbars */
	-jr-scrollbar-thumb: -fx-outer-border;
	-jr-scrollbar-track: -fx-control-inner-background;

However, I would not remove the "feature" that the scrollbar is hidden when the focus is somewhere else. At least for the group panel, it was more irritating to always show the scrollbar.

[AEgit]

Hmmm, I see the hidden scroll bar as a big problem. I provide an example to make the problem more clear.

1. Mouse cursor is on the maintable. The group scroll bar is invisible. Can you guess where it is?

2. Mouse cursor is on the groups panel. The scroll bar is now visible, but only as a faint grey.

3. Mouse cursor is direct placed on the group scroll bar - its visibility has increased, but it is still far from being optimal. Did you make the right guess regarding the position of the scroll bar in 1)?

4. Same as 3) but position of scroll bar is emphasised by red rectangle.
   

[AEgit]

At the moment, it is impossible to know, where the scroll bar is, before moving the mouse cursor to the groups panel. Due to the chosen colour scheme, even after that, it is difficult to discern.

Changing the colour could alleviate the problem, but it does not fully address it. If I just change the colour but leave the scroll bar invisible, when the groups panel is not in focus, I still will not know, where to drag my mouse if I want to immediately use the scroll bar. Instead, I would first have to drag it to the groups panel and only then it would be possible to find the scroll bar.
This means I have to make at least 2 actions to get to the scroll bar - if the scroll bar was visible all the time, 1 action would be enough: I could immediately select the scroll bar.

[jecsanb]

Hello,
I am also trying to work on this but I am having trouble finding where the table and the scroll bar is defined. Could you point me to the file where this is suppose to be at? I get to jabref/src/main/java/org/jabref/gui/maintable/MainTable.java but form here I am not sure what handles the scroll bar or if its parts of a scroll pane or something else. Also, did yall manually edit the fxml files or did you use something else to visually work with them?
Thanks,

[tobiasdiez]

@jecsanb Thanks for your interest. You are on the right track, the MainTable class indeed handles the main table (no pun intended). However, the scrollbars are created by the built-in javafx controls (table/list) and are styled using the following css:

jabref/src/main/java/org/jabref/gui/Base.css

Lines 699 to 762 in c33ba43

	.scroll-bar {
	-fx-background-color: transparent;
	-fx-opacity: 0;
	}
	.scroll-bar:horizontal .track,
	.scroll-bar:vertical .track {
	-fx-background-color: -jr-scrollbar-track;
	-fx-opacity: 0.2;
	-fx-background-radius: 0em;
	}
	.scroll-bar:horizontal .thumb,
	.scroll-bar:vertical .thumb {
	-fx-background-color: -jr-scrollbar-thumb;
	-fx-background-insets: 0, 0, 0;
	-fx-background-radius: 0em;
	}
	.scroll-bar .thumb:hover,
	.scroll-bar .thumb:pressed {
	-fx-background-color: derive(-jr-scrollbar-thumb, -20%);
	}
	/* Hide increment and decrement buttons */
	.scroll-bar > .increment-button,
	.scroll-bar > .decrement-button {
	-fx-background-color: null;
	-fx-background-radius: 0;
	-fx-background-insets: 0;
	-fx-padding: 0;
	}
	/* Hide increment and decrement arrows */
	.scroll-bar:horizontal > .decrement-button > .decrement-arrow,
	.scroll-bar:horizontal > .increment-button > .increment-arrow,
	.scroll-bar:vertical > .decrement-button > .decrement-arrow,
	.scroll-bar:vertical > .increment-button > .increment-arrow {
	-fx-background-color: null;
	-fx-background-radius: 0;
	-fx-background-insets: 0;
	-fx-shape: null;
	-fx-padding: 0;
	}
	/* Need some padding since otherwise no scroll-bar is displayed at all */
	.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
	-fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
	}
	.scroll-bar:vertical > .decrement-button > .decrement-arrow {
	-fx-padding: 0em 0.333em 0em 0.333em; /* 2 4 2 4 */
	}
	/* Only show scrollbars for hovered elements */
	.list-view:hover .scroll-bar,
	.tree-view:hover .scroll-bar,
	.table-view:hover .scroll-bar,
	.tree-table-view:hover .scroll-bar,
	.text-input:hover .scroll-bar,
	.scroll-pane:hover .scroll-bar {
	-fx-opacity: 1;
	}

@AEgit
As a compromise, I would suggest the following. Always show the scrollbars. If the users hovers something else, reduce the opacity so that the scrollbars are not emphasized that much (but are still distinguishable).

[AEgit]

@tobiasdiez
Depending on how much they are distinguishable/visible that sounds like a fair compromise to me.

[AEgit]

Note, that the visibility problem of the scroll bar also affects the "Preferences" dialog:

1. Mouse cursor is on the right half of the "Preferences" dialog (i. e. does not touch the "Preferences" list). The scroll bar is invisible:
   

2. Mouse cursor is on the left half of the "Preferences" dialog (i. e. it touches the "Preferences" list). The scroll bar is barely visible:
   

3. Mouse cursor is direct placed on the "Preferences" scroll bar - its visibility has increased, but it is still far from being optimal:
   

[AEgit]

JabRef 5.0.0-dev--2019-10-26----9fd49bcb2
Windows 10 10.0 amd64
Java 12.0.2

I can confirm this has been fixed in the current dev version for the light theme. Personally, I would prefer to have a bigger contrast difference, when the cursor is not found in the groups window, but maybe this is just something I need to get used to.
Something that might need to change as well, is the thickness/width of the scroll bars - currently they seem a bit difficult to hit with the mouse: But again, this might just be something to get used to.

As mentioned in #5515 (comment) there are some issues with the dark theme, but since I do not plan on using that anyway, I don't care so much about those minor issues.

Thanks again for your hard work!