[files-banner] Add max 2-line limit for banner text.

It clamps the banner text in case of passing the limit and adds ellipsis
at the end, so the banner text doesn't overflow over/under the sibling
elements.

There is line-clamp property made for this purpose to do it simply by
css, and it's built on -webkit-box display. As webkit-box deprecated,
the css presubmit fails.

https://www.chromestatus.com/feature/5680142707851264
https://gist.github.com/bfgeek/b1dc3cb741681523ae043045411eb526

So the other solution is setting the property through the js code while
presubmit process updated.

Comparing patchset 2 and 5 shows the difference.

Tested RTL manually and it's fine.

There was a change in behavior on line clamp recently supposed to be
released in M85, as tested it works as expected.

Bug: 1082539
Change-Id: Ie677b367eb9fa28704d89eda7ea54af9ba5a81bc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2251859
Commit-Queue: Omid Tourzan <oto@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#780230}

ui/file_manager/file_manager/common/js/util.js

@@ -1650,3 +1650,21 @@ util.isSameVolume = (entries, volumeManager) => {
 
   return true;
 };
+
+/**
+ * Sets line clamp properties on elements to limit element's text to specified
+ * number of lines and add ellipsis.
+ *
+ * @param {!Element} element Element to clamp.
+ * @param {string} lines Maximum number of lines in element.
+ * @return {!Element}
+ */
+util.setClampLine = (element, lines) => {
+  element.style.overflow = 'hidden';
+  element.style.textOverflow = 'ellipsis';
+  element.style.webkitBoxOrient = 'vertical';
+  element.style.display = '-webkit-box';
+  element.style.webkitLineClamp = lines;
+
+  return element;
+};
\ No newline at end of file

ui/file_manager/file_manager/foreground/js/ui/banners.js

@@ -216,6 +216,7 @@ class Banners extends cr.EventTarget {
     let close, links;
     if (util.isFilesNg()) {
       const message = util.createChild(wrapper, 'drive-welcome-message');
+      util.setClampLine(message, '2');
 
       const title = util.createChild(message, 'drive-welcome-title headline2');
       title.textContent = str('DRIVE_WELCOME_TITLE');
@@ -307,6 +308,7 @@ class Banners extends cr.EventTarget {
         text.textContent = strf(
             'DRIVE_SPACE_AVAILABLE_LONG',
             util.bytesToString(opt_sizeStats.remainingSize));
+        util.setClampLine(text, '2');
         box.appendChild(text);
 
         const buttonGroup = this.document_.createElement('div');
@@ -670,9 +672,10 @@ class Banners extends cr.EventTarget {
       const message = this.document_.createElement('div');
       message.className = 'warning-message';
       if (util.isFilesNg()) {
-        message.className += 'warning-message body2-primary';
+        message.className += ' body2-primary';
         message.innerHTML =
             util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING_FILESNG'));
+        util.setClampLine(message, '2');
       } else {
         message.innerHTML =
             util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));