tweaking scrolbars + found bug...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/lib/widget/browse2.html

@@ -13,6 +13,9 @@ body {
 }
 
 
+.browse-widget {
+	user-select: none;
+}
 .browse-widget:not(.flat) .list :focus {
 	outline: none; 
 }
@@ -36,6 +39,10 @@ body {
 	background: rgba(0, 0, 0, 0.08);
 }
 
+/* XXX not sure about this... */
+.browse-widget .list .list {
+	overflow: visible;
+}
 
 /* XXX stub...
 .browse-widget:not(.flat) .list .text:first-child:before {
@@ -55,6 +62,36 @@ body {
 */
 
 
+/* scrollbar setup...  */
+.browse-widget ::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+.browse-widget ::-webkit-scrollbar-button {
+	display: none;
+}
+.browse-widget ::-webkit-scrollbar-track {
+}
+.browse-widget ::-webkit-scrollbar-track-piece {
+	background: transparent;
+}
+.browse-widget ::-webkit-scrollbar-track-piece {
+	background: rgba(0, 0, 0, 0.05);
+}
+.browse-widget ::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.15);
+}
+.browse-widget ::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.3);
+}
+.browse-widget ::-webkit-scrollbar-corner {
+}
+.browse-widget ::-webkit-resizer {
+}
+
+
+
+
 </style>
 
 <script src="../../ext-lib/jquery.js"></script>
@@ -195,10 +232,12 @@ requirejs([
 
 		make.Separator()
 
-		;(new Array(100))
+		make.nest(
+			'scroll testing',
+			(new Array(100))
 				.fill(1)
-			.forEach(function(_, i){
+				.map(function(_, i){
-				make(i) })
+					return make(i) }))
 
 	}, {
 		itemButtons: [

ui (gen4)/lib/widget/browse2.js

@@ -3025,6 +3025,14 @@ var BrowserPrototype = {
 	//
 	// XXX instrument interactions...
 	// XXX register event handlers...
+	// XXX BUG: scrollbar in list can get focus and intercept key events...
+	// 			- document.querySelector(':focus') returns null
+	//			- does not reproduce in the ImageGrid.Viewer
+	//			- scrollbar styling does not seem to affect this...
+	//		to reproduce:
+	//			- load a scrolled dialog...
+	//			- click on the scrollbar
+	//				- now the browser does not get key events
 	renderList: function(items, context){
 		var that = this
 		var options = context.options || this.options
@@ -3335,7 +3343,13 @@ var BrowserPrototype = {
 						&& that.dom.querySelectorAll('.focused')
 							.forEach(function(e){
 								e.classList.remove('focused') })
-					this.classList.add('focused') })
+					this.classList.add('focused') 
+
+					this.scrollIntoView({
+						behavior: 'auto',
+						block: 'nearest',
+					})
+				})
 				// set focus...
 				.focus() },
 	__blur__: function(evt, elem){