wallpaper-picker: add a scroll bar for category list

After adding a new category of wallpaper, the category
overflows. Adding a scroll bar to make it scrollable.

Bug: 1161051
Change-Id: I8e2aee3a04a0c52949824f9a1a0e98ddc8ad9482
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2599711
Commit-Queue: Xiqi Ruan <xiqiruan@chromium.org>
Reviewed-by: Aga Wronska <agawronska@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840489}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

@@ -43,12 +43,22 @@ body {
   -webkit-box-align: center;
   display: block;
   height: 100%;
-  overflow: visible;
+  overflow-x: visible;
+  overflow-y: auto;
   padding: unset;
   position: relative;
   width: 192px;
 }
 
+.dialog-topbar::-webkit-scrollbar-thumb {
+  background: #888;
+  display: none;
+}
+
+.dialog-topbar.show-scroll-bar::-webkit-scrollbar-thumb {
+  display: block;
+}
+
 .dialog-topbar .spacer {
   -webkit-box-flex: 1;
 }

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

@@ -406,6 +406,18 @@ WallpaperManager.prototype.preDownloadDomInit_ = function() {
       }, 500);
     };
   }());
+
+  var dialogTopbar = this.document_.body.querySelector('.dialog-topbar');
+  dialogTopbar.addEventListener('scroll', function() {
+    var scrollTimer;
+    return () => {
+      dialogTopbar.classList.add('show-scroll-bar');
+      window.clearTimeout(scrollTimer);
+      scrollTimer = window.setTimeout(() => {
+        dialogTopbar.classList.remove('show-scroll-bar');
+      }, 500);
+    };
+  }());
 };
 
 /**