[directorytree] Enable files-ng directory tree "clipped" animation

When the tree width is small in files-ng, it should be redrawn for the
so-called "clipped" state. Add a "clipped" attribute to the tree, that
enables the CSS animation that redraws the tree in "clipped" style.

The design does not currently specify the "clipped" break point so use
and arbitrary value (135 px) for now.

A test for this requires that we first fix the directory_tree_unittest
because it fails with files-ng enabled: it tests directorytree.js code
does not wrap the code in a <div class='dialog-navigation-list'> [1].

[1] This CL is for Files App, and it has that <div> wrapper around the
directory-tree always. In a future patch we decided that the "wrapper"
can be removed, that we can measure width from .this, and the unittest
would then pass unchanged too :)

Bug: 992819
Change-Id: I81e8d459cafd3fe1fb46dc5c21dad4605d5b2c63
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1947603Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721361}

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

@@ -1847,6 +1847,9 @@ class DirectoryTree extends cr.ui.Tree {
   constructor() {
     super();
 
+    /** @type {Element} the containing DOM element */
+    this.container_ = null;
+
     /** @type {NavigationListModel} */
     this.dataModel_ = null;
 
@@ -1885,6 +1888,10 @@ class DirectoryTree extends cr.ui.Tree {
       fakeEntriesVisible) {
     cr.ui.Tree.prototype.decorate.call(this);
 
+    if (directorytree.FILES_NG_ENABLED) {
+      this.container_ = document.querySelector('.dialog-navigation-list');
+    }
+
     this.sequence_ = 0;
     this.directoryModel_ = directoryModel;
     this.volumeManager_ = volumeManager;
@@ -2292,12 +2299,27 @@ class DirectoryTree extends cr.ui.Tree {
   }
 
   /**
-   * Updates the UI after the layout has changed.
+   * Updates the UI after the layout has changed, due to splitter, or window
+   * resize. In the FILES_NG_ENABLED case, set tree clipped attribute state.
    */
   relayout() {
+    if (directorytree.FILES_NG_ENABLED) {
+      this.setTreeClippedAttributeState_();
+    }
+
     cr.dispatchSimpleEvent(this, 'relayout', true);
   }
 
+  /**
+   * Sets the tree clipped attribute state from the this.container_ element's
+   * computed style width.
+   * @private
+   */
+  setTreeClippedAttributeState_() {
+    const width = parseFloat(getComputedStyle(this.container_).width);
+    this.toggleAttribute('clipped', width < 135);
+  }
+
   // DirectoryTree is always expanded.
   /** @return {boolean} */
   get expanded() {