Commit 7cd6bc8b authored by Noel Gordon's avatar Noel Gordon Committed by Commit Bot

[directorytree] Remove container dependency from the tree

CL:1947603 noted how to remove the .dialog-navigation-list dependency
from the directory tree _and_ keep its unittest passing.

Thus this CL. There are no integration tests of the FilesApp splitter
or FilesApp window resize event handling. Add tests for both, and use
them to test the tree "clipped" attribute, since it is active in both
files-ng and normal FilesApp after this change.

Bug: 992819
Change-Id: Id46cbee77fc39bb227f66fc2850ee09a6fe68df8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1947620Reviewed-by: default avatarNoel Gordon <noel@chromium.org>
Reviewed-by: default avatarLuciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721907}
parent 2087f0a8
......@@ -473,7 +473,9 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
FilesAppBrowserTest,
::testing::Values(TestCase("directoryTreeHorizontalScroll"),
TestCase("directoryTreeExpandHorizontalScroll"),
TestCase("directoryTreeVerticalScroll")));
TestCase("directoryTreeVerticalScroll"),
TestCase("directoryTreeClippedWindowResize"),
TestCase("directoryTreeClippedSplitterResize")));
WRAPPED_INSTANTIATE_TEST_SUITE_P(
DirectoryTreeContextMenu, /* directory_tree_context_menu.js */
......
......@@ -758,6 +758,18 @@ test.util.sync.fakeDragAndDrop =
return true;
};
/**
* Sends a resize event to the content window.
*
* @param {Window} contentWindow Window to be tested.
* @return {boolean} True if the event was sent to the contentWindow.
*/
test.util.sync.fakeResizeEvent = (contentWindow) => {
const resize = contentWindow.document.createEvent('Event');
resize.initEvent('resize', false, false);
return contentWindow.dispatchEvent(resize);
};
/**
* Focuses to the element specified by |targetQuery|. This method does not
* provide any guarantee whether the element is actually focused or not.
......
......@@ -1847,9 +1847,6 @@ class DirectoryTree extends cr.ui.Tree {
constructor() {
super();
/** @type {Element} the containing DOM element */
this.container_ = null;
/** @type {NavigationListModel} */
this.dataModel_ = null;
......@@ -1888,10 +1885,6 @@ 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;
......@@ -2299,24 +2292,21 @@ class DirectoryTree extends cr.ui.Tree {
}
/**
* 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.
* Updates the UI after the layout has changed, due to resize events from
* the splitter or from the DOM window.
*/
relayout() {
if (directorytree.FILES_NG_ENABLED) {
this.setTreeClippedAttributeState_();
}
this.setTreeClippedAttribute_();
cr.dispatchSimpleEvent(this, 'relayout', true);
}
/**
* Sets the tree clipped attribute state from the this.container_ element's
* computed style width.
* Sets the tree 'clipped' attribute. TODO(crbug.com/992819): the breakpoint
* in the design is unspecified. Punt: use 135px for now.
* @private
*/
setTreeClippedAttributeState_() {
const width = parseFloat(getComputedStyle(this.container_).width);
setTreeClippedAttribute_() {
const width = parseFloat(window.getComputedStyle(this).width);
this.toggleAttribute('clipped', width < 135);
}
......
......@@ -138,4 +138,92 @@
const noScrollLeft = scrolled.scrollLeft === 0;
chrome.test.assertTrue(noScrollLeft, 'Tree should not scroll left');
};
/**
* 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]');
};
})();
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment