[directorytree] Remove the clipping animation

This being the source of the crowd's recent oh-ah noises.

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

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -530,9 +530,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
         TestCase("directoryTreeExpandHorizontalScroll"),
         TestCase("directoryTreeExpandHorizontalScrollRTL"),
         TestCase("directoryTreeVerticalScroll"),
-        TestCase("directoryTreeClippedWindowResize"),
-        TestCase("directoryTreeExpandFolder"),
-        TestCase("directoryTreeClippedSplitterResize")));
+        TestCase("directoryTreeExpandFolder")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     DirectoryTreeContextMenu, /* directory_tree_context_menu.js */

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -184,16 +184,6 @@ html[dir='rtl'] #directory-tree .tree-row > .file-row {
   border-radius: 20px 0 0 20px;
 }
 
-html[class*='col-resize'] #directory-tree[files-ng]
-    .tree-item .tree-item .tree-row > .file-row {
-  transition: all 500ms;
-}
-
-#directory-tree[files-ng][clipped]
-    .tree-item .tree-item .tree-row > .file-row {
-  padding-inline-start: 0 !important;
-}
-
 #directory-tree .tree-row > .expand-icon {
   flex: none;
   height: 36px;

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

@@ -2368,20 +2368,9 @@ class DirectoryTree extends cr.ui.Tree {
    * the splitter or from the DOM window.
    */
   relayout() {
-    this.setTreeClippedAttribute_();
     cr.dispatchSimpleEvent(this, 'relayout', true);
   }
 
-  /**
-   * Sets the tree 'clipped' attribute. TODO(crbug.com/992819): the breakpoint
-   * in the design is unspecified. Punt: use 135px for now.
-   * @private
-   */
-  setTreeClippedAttribute_() {
-    const width = parseFloat(window.getComputedStyle(this).width);
-    this.toggleAttribute('clipped', width < 135);
-  }
-
   // DirectoryTree is always expanded.
   /** @return {boolean} */
   get expanded() {

ui/file_manager/integration_tests/file_manager/directory_tree.js

@@ -322,94 +322,6 @@
     chrome.test.assertTrue(notScrolled, 'Tree should not scroll right');
   };
 
-  /**
-   * Tests that the directory tree element has a clipped attribute when the
-   * tree is narrowed in width due to a window.resize event.
-   */
-  testcase.directoryTreeClippedWindowResize = async () => {
-    // Open FilesApp on Downloads.
-    const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS);
-
-    // Verify the directory tree is not initially clipped.
-    await remoteCall.waitForElement(appId, '#directory-tree:not([clipped])');
-
-    // Change the directory tree to a narrow width and fire window.resize.
-    const navigationList = '.dialog-navigation-list';
-    await remoteCall.callRemoteTestUtil(
-        'setElementStyles', appId, [navigationList, {width: '100px'}]);
-    await remoteCall.callRemoteTestUtil('fakeResizeEvent', appId, []);
-
-    // Check: the directory tree should report that it is clipped.
-    await remoteCall.waitForElement(appId, '#directory-tree[clipped]');
-
-    // Change the directory tree to a wider width and fire window.resize.
-    await remoteCall.callRemoteTestUtil(
-        'setElementStyles', appId, [navigationList, {width: '300px'}]);
-    await remoteCall.callRemoteTestUtil('fakeResizeEvent', appId, []);
-
-    // Check: the directory tree should report that it is not clipped.
-    await remoteCall.waitForElementLost(appId, '#directory-tree[clipped]');
-  };
-
-  /**
-   * Tests that the directory tree element has a clipped attribute when the
-   * tree is narrowed in width due to the splitter.
-   */
-  testcase.directoryTreeClippedSplitterResize = async () => {
-    const splitter = '#navigation-list-splitter';
-
-    /**
-     * Creates a left button mouse event |name| targeted at the splitter,
-     * located at position (x,y) relative to the splitter bounds.
-     * @param {string} name The mouse event name.
-     * @param {number} x The event.clientX location.
-     * @param {number} y The event.clientY location.
-     * @return {!Array<*>} remoteCall fakeEvent arguments array.
-     */
-    function createSplitterMouseEvent(name, x, y) {
-      const fakeEventArguments = [splitter, name];
-
-      fakeEventArguments.push({
-        // Event properties of the fakeEvent.
-        'bubbles': true,
-        'composed': true,
-        'button': 0,  // Main button: left usually.
-        'clientX': x,
-        'clientY': y,
-      });
-
-      return fakeEventArguments;
-    }
-
-    // Open FilesApp on Downloads.
-    const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS);
-
-    // Verify the directory tree is not initially clipped.
-    await remoteCall.waitForElement(appId, '#directory-tree:not([clipped])');
-
-    // Send a mouse down to the splitter element.
-    await remoteCall.waitForElement(appId, splitter);
-    const mouseDown = createSplitterMouseEvent('mousedown', 0, 0);
-    chrome.test.assertTrue(
-        await remoteCall.callRemoteTestUtil('fakeEvent', appId, mouseDown));
-
-    // Mouse is down: move it to the left.
-    const moveLeft = createSplitterMouseEvent('mousemove', -200, 0);
-    chrome.test.assertTrue(
-        await remoteCall.callRemoteTestUtil('fakeEvent', appId, moveLeft));
-
-    // Check: the directory tree should report that it is clipped.
-    await remoteCall.waitForElement(appId, '#directory-tree[clipped]');
-
-    // Mouse is down: move it to the right.
-    const moveRight = createSplitterMouseEvent('mousemove', 200, 0);
-    chrome.test.assertTrue(
-        await remoteCall.callRemoteTestUtil('fakeEvent', appId, moveRight));
-
-    // Check: the directory tree should report that it is not clipped.
-    await remoteCall.waitForElementLost(appId, '#directory-tree[clipped]');
-  };
-
   /**
    * Adds folders with the name prefix /path/to/sub-folders, it appends "-$X"
    * suffix for each folder.