[banner] Fix tabindex issue of hidden links in line-clamp mode.

The links in the banner text hide when window shrinks and ellipsis
appears but as their display is visible they can gain focus through tab
key. It results in breaking the ellipsis message and scrolling down to
show the link text.

The following structure of elements used to handle this situation:
container > wrapper > link

This change adds an observer to check if the ellipsis is shown and hide
the wrapper if so, so the <link> can't get focus anymore.

The CSS ellipsis is active and applied if the scroll width or height of
the element is greater than its client width or height. This is checked
every time the size of element changes.

The links don't get focus with tab key as their container is hidden
when CSS ellipsis active. It behaves good because the links are the
last part of the texts, so having overflowed or ellipsis means the
links are invisible now and safe to hide their container.

The download warning message needed more changes as the link was
embedded in the message string, so a wrapper (link-wrapper) added
to handle hide. Hiding the link itself leads to removing of ellipsis
so a wrapper helps.

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

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

@@ -1667,4 +1667,15 @@ util.setClampLine = (element, lines) => {
   element.style.webkitLineClamp = lines;
 
   return element;
+};
+
+/**
+ * Returns true if the element's content has overflowed.
+ *
+ * @param {!Element} element The element to check.
+ * @returns {boolean}
+ */
+util.hasOverflow = (element) => {
+  return element.clientWidth < element.scrollWidth ||
+      element.clientHeight < element.scrollHeight;
 };
\ No newline at end of file

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

@@ -1797,6 +1797,14 @@ body:not(.files-ng) .downloads-warning .warning-message {
   margin-inline-end: 40px;
 }
 
+body.files-ng .warning-message .link-wrapper {
+  display: inline;
+}
+
+body.files-ng .warning-message .link-wrapper > a {
+  display: inline-block;
+}
+
 body:not(.files-ng) .downloads-warning[hidden] {
   display: flex !important;  /* Overrides [hidden] for animation. */
   height: 0;
@@ -3642,4 +3650,4 @@ files-toast {
 cr-input:not(:defined),
 files-tooltip:not(:defined) {
   display: none;
-}
+}
\ No newline at end of file

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

@@ -228,6 +228,10 @@ class Banners extends cr.EventTarget {
 
       links = util.createChild(body, 'drive-welcome-links');
 
+      // Hide link if it's trimmed by line-clamp so it does not get focus
+      // and break ellipsis render.
+      this.hideOverflowedElement(links, body);
+
       const buttonGroup = util.createChild(wrapper, 'button-group', 'div');
 
       close = util.createChild(
@@ -676,6 +680,17 @@ class Banners extends cr.EventTarget {
         message.innerHTML =
             util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING_FILESNG'));
         util.setClampLine(message, '2');
+
+        // Wrap a div around link.
+        const link = message.querySelector('a');
+        const linkWrapper = this.document_.createElement('div');
+        linkWrapper.className = 'link-wrapper';
+        message.appendChild(linkWrapper);
+        linkWrapper.appendChild(link);
+
+        // Hide the link if it's trimmed by line-clamp so it does not get focus
+        // and break ellipsis render.
+        this.hideOverflowedElement(linkWrapper, message);
       } else {
         message.innerHTML =
             util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
@@ -807,4 +822,21 @@ class Banners extends cr.EventTarget {
             chrome.fileManagerPrivate.DriveOfflineReason.NOT_READY;
     this.authFailedBanner_.hidden = !showDriveNotReachedMessage;
   }
+
+  /**
+   * Hides element if it has overflowed its container after resizing.
+   *
+   * @param {!Element} element The element to hide.
+   * @param {!Element} container The container to observe overflow.
+   */
+  hideOverflowedElement(element, container) {
+    const observer = new ResizeObserver(() => {
+      if (util.hasOverflow(container)) {
+        element.style.visibility = 'hidden';
+      } else {
+        element.style.visibility = 'visible';
+      }
+    });
+    observer.observe(container);
+  }
 }