Dependencies declared in "package.json" are installed locally, so the
call to the handlebars script must be updated accordingly.
To ensure that Handlebars is installed before using it the Make step to
compile the templates now depends on the step to setup the development
environment.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
As the virtual list removes its child elements that are no longer
visible the index of the messages in the acceptance test is no longer an
absolute index for the whole list, but an index only for the currently
visible messages. However, as all the messages sent in each test fit in
the available space no message is hidden and the previous indexes are
still valid.
The only change needed is in the locator for chat messages; as they are
declared as direct children of their parent now they must be set as
descendants of the wrapper instead of as descendants of the message list
itself.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Firefox automatically includes scrollable elements in the sequential
keyboard navigation, but it needs to be explicitly done for Chromium.
Moreover, setting "tabindex" is also needed in Chromium to be able to
scroll by keeping a key pressed after focusing on the scrollable element
by clicking on one of its children; in Firefox the event keeps being
processed and the scrolling goes on until the key is released, but in
Chromium, when "tabindex" is not set, the scrolling stops as soon as the
child element is removed (which in the case of the virtual list happens
when the element goes out of view).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The virtual list requires that its internal wrappers use an absolute
position. Due to that absolute position the padding of the container
does not affect the wrappers, so the desired padding must be applied
through its left and right position.
As the virtual list keeps only a subset of its elements in the DOM the
":first-child" pseudo-selector no longer refers to the actual first
child element, but to the first one currently in the DOM; it would be
necessary to apply the CSS rules using a specific CSS class set only in
the desired element. However, as the first comment always includes the
date separator, which already has a top margin, the top padding is not
really needed in the first comment, so it was simply removed.
Moving the message list between the main view and the sidebar changes
its size, and thus it is necessary to reload the virtual list; when the
virtual list is reloaded it is ensured that the last visible element
will still be visible after the reload, so the chat view no longer needs
to explicitly handle that.
In a similar way, the message list also needs to be reloaded when the
window is resized, or when the chat view is in the main view and the
sidebar is opened or closed, as those actions change the size of the
main view.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the size of the container changes the position and size of all the
elements in the list could change. The virtual list relies on the cached
values for those properties, so they must be cached again when they
change.
The values need to be cached from elements in the document, but it is
not possible to add all the elements at once, even if temporary, to
cache their values. Thus the reload is an incremental process that
starts with the visible elements and progressively updates the rest of
elements; during that process the list can be scrolled only to those
elements already loaded, as those are the only ones with valid cached
values.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Although similar, prepending elements is not just a "mirrored" append;
besides caching the position and size of the added elements it is also
necessary to update the position of the rest of the elements, as it will
have have changed due to the prepended elements.
However, it is not necessary to show those elements to update their
position; it is assumed that the existing elements will not be modified,
so their position can be updated based on the height of the prepended
elements (which needs to account for a possible collapse of the margins
between the first existing element and the first prepended element).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Before the 3.0.0 release jQuery rounded the height to the nearest
integer, so the height returned by jQuery is not the correct value in
browsers with subpixel accuracy (positions and sizes with decimal
values), like Firefox. Due to this all the height related functions of
jQuery need to be replaced with custom versions that return the height
as a float instead of an integer.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Despite the browser optimizations there is a limit in the number of
elements that can be added to a document before the browser becomes
sluggish when the document is further modified.
This problem can be clearly seen in the list of chat messages with long
conversations; adding several messages to the document all at once
instead of one by one can improve the performance of the initial load,
but when the number of messages grows too much any other addition causes
the browser to become unresponsive. In this case adding several messages
at once (which may not be possible either during a regular chat) does
not help, because the real culprit here is that the browser needs to
layout again all the previous messages.
To solve that problem this commit introduces an initial implementation
of a virtual list; the virtual list keeps in the document only those
elements that are currently visible and refreshes them as needed when
the list is scrolled.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Each time a new node is added to the document a reflow and a render is
triggered. This can cause the UI to become unresponsive when a lot of
nodes are added in a row, for example, when loading the messages for the
first time after entering a room.
To mitigate that now the DOM elements for the messages to add are
buffered using a document fragment. Instead of adding the element for
each model directly to the document now they are added to the document
fragment, which does not cause a reflow nor a render, and once all the
elements have been created then they are added at once to the document,
which causes a single reflow and render instead of one for each element.
Despite that, note that when there are thousands of messages in the list
even a single reflow and render can make the UI hang for a few seconds;
using a virtual list is probably the only way to solve this.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The calculations to get the scroll position were based on both the
previous newest comment and on the current newest comment just added.
However, as the current newest comment is the one that needs to be fully
shown the calculations can be solved using only that element.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Currently models are only appended, so there is no need to handle an
insertion. Moreover, it is not handled anywhere else, so even if a model
was inserted the result would be broken.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the chat view was in the sidebar, the scroll position of the chat
view was reset to the top every time that the sidebar was closed and
opened again or the chat tab was selected after changing to a different
one.
The reason is that detaching an element and attaching it again, which
happens in both scenarios, resets the scroll position of the element, so
now the scroll position is explicitly saved before closing the sidebar
or unselecting the chat tab and restored again after opening the sidebar
or selecting the chat tab again.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Calling "restoreScrollPosition" twice caused the chat view to be
scrolled to the top due to not taking into account the current scroll
position.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The calls to the default methods from the server to open and close the
sidebar had to be replaced by their implementation to be able to also
trigger an event when the animation ends.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Fixes#1272
The same code as in server. It makes sure we do not return shares that
are in in the trash as this will result in mounting issues.
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>