Set width of dialog main panel on relayout events

The files-ng layout moves the breadcrumbs and action bar to the right
hand side of the splitter. When the length of the breadcrumbs and action
bar combined exceed the width available, the content was being pushed to
the right in LTR layout and to the left in RTL layout.

Adds an event handler for the 'relayout' event that checks the widths of
the main panel, navigation list, splitter and main panel and sets the
width of the main panel explicitly if the main panel content is too wide
to fit in the main window (which forces the browser to layout the child
content of the main panel).

Limiting the width of the main panel makes the content fit, and hence,
scrolling of the content in the viewport can't happen.

Note, the problem appears in 2 cases - one by expanding the directory
tree with nested directories and narrow windows. Secondly, if the search
box is expanded and space in the dialog header runs out, causing the
header width to expand.

For either case, if style width has not been set on the main panel,
we force the setting the first time in, in order to stop clipping
of expanded content.

We throttle this rAF sizing as recommended for scroll events[1].

[1] https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

Bug: 1059643
Change-Id: I545ed89113f5840f96dda8a94f3ec0ae51b1cc63
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098140
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749485}

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -123,6 +123,9 @@ class FileManagerUI {
      */
     this.dialogContainer =
         queryRequiredElement('.dialog-container', this.element);
+    this.dialogContainer.addEventListener('relayout', (event) => {
+      this.layoutChanged_();
+    });
 
     /**
      * Context menu for texts.
@@ -556,6 +559,48 @@ class FileManagerUI {
     }
   }
 
+  /**
+   * Handles the 'relayout' event to set sizing of the dialog main panel.
+   *
+   * @private
+   */
+  layoutChanged_() {
+    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;
+
+      const mainWindow = document.querySelector('.dialog-container');
+      const navigationList = document.querySelector('.dialog-navigation-list');
+      const splitter = document.querySelector('.splitter');
+      const dialogMain = document.querySelector('.dialog-main');
+
+      // Check the width of the tree and splitter and set the main panel width
+      // to the remainder if it's too wide.
+      const mainWindowWidth = mainWindow.offsetWidth;
+      const navListWidth = navigationList.offsetWidth;
+      const splitStyle = window.getComputedStyle(splitter);
+      const splitMargin = parseInt(splitStyle.marginRight, 10) +
+          parseInt(splitStyle.marginLeft, 10);
+      const splitWidth = splitter.offsetWidth + splitMargin;
+      const dialogMainWidth = dialogMain.offsetWidth;
+      if (!dialogMain.style.width ||
+          (navListWidth + splitWidth + dialogMainWidth) > mainWindowWidth) {
+        dialogMain.style.width =
+            (mainWindowWidth - navListWidth - splitWidth) + 'px';
+      }
+    });
+  }
+
   /**
    * Sets the current list type.
    * @param {ListContainer.ListType} listType New list type.