[directorytree] Clamp directory tree horizontal scroll to 0

The directory tree does not support horizontal scrolling (by design), but
expanding sub-directories using the keyboard can reveal directory entries
that are wider than the directory tree element and cause the tree element
to gain a scrollLeft > 0 (the tree is scrolled left, in the horizontal).

One fix is CSS overflow-x: clip, but chromium does not support it yet.

Another way is to observe 'scroll' events and clamp the tree's scrollLeft
to 0 if needed. And because browser 'scroll' event are very frequent, and
we only need keep-up with the keyboard input rate, perform the clamp in a
RAF to throttle the 'scroll' event processing rate.

Bug: 1025581
Change-Id: I7c4b0a06fee9cf6356d914314b561feb0da8f7a0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1924341Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#716962}

ui/file_manager/file_manager/foreground/js/ui/directory_tree.js

@@ -1859,6 +1859,9 @@ class DirectoryTree extends cr.ui.Tree {
         fileOperationManager, 'entries-changed',
         this.onEntriesChanged_.bind(this));
 
+    this.addEventListener(
+        'scroll', this.onTreeScrollEvent_.bind(this), {passive: true});
+
     this.addEventListener('click', (event) => {
       // Chromevox triggers |click| without switching focus, we force the focus
       // here so we can handle further keyboard/mouse events to expand/collapse
@@ -2221,6 +2224,31 @@ class DirectoryTree extends cr.ui.Tree {
     });
   }
 
+  /*
+   * The directory tree does not support horizontal scrolling (by design), but
+   * can gain a scrollLeft > 0, see crbug.com/1025581. Always clamp scrollLeft
+   * back to 0 if needed.
+   */
+  onTreeScrollEvent_() {
+    if (this.scrollRAFActive_ === true) {
+      return;
+    }
+
+    /**
+     * True if a scroll RAF is active: scroll events are frequent and serviced
+     * using RAF to throttle our processing of these events.
+     * @type {boolean}
+     */
+    this.scrollRAFActive_ = true;
+
+    window.requestAnimationFrame(() => {
+      this.scrollRAFActive_ = false;
+      if (this.scrollLeft) {
+        this.scrollLeft = 0;
+      }
+    });
+  }
+
   /**
    * Updates the UI after the layout has changed.
    */