[files-tooltip] Add padding to the tooltips on the edge.

Adding 6px padding to the tooltip if it's on the edge of the window.

Adjusting current calculation to consider 6px padding according to the
ux spec.

Tested on rtl successfully as well.

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

ui/file_manager/file_manager/foreground/elements/files_tooltip.js

@@ -171,6 +171,8 @@ const FilesTooltip = Polymer({
 
     const useCardTooltip = target.hasAttribute('show-card-tooltip');
 
+    const windowEdgePadding = 6;
+
     const label = target.getAttribute('aria-label');
     if (!label) {
       return;
@@ -222,11 +224,14 @@ const FilesTooltip = Polymer({
       this.cleanupCardTooltip_();
 
       left = rect.left + rect.width / 2 - this.offsetWidth / 2;
-      if (left < 0) {
-        left = 0;
+      if (left < windowEdgePadding) {
+        left = windowEdgePadding;
       }
-      if (left > document.body.offsetWidth - this.offsetWidth) {
-        left = document.body.offsetWidth - this.offsetWidth;
+
+      const maxLeft =
+          document.body.offsetWidth - this.offsetWidth - windowEdgePadding;
+      if (left > maxLeft) {
+        left = maxLeft;
       }
     }
 

ui/file_manager/file_manager/foreground/elements/files_tooltip_unittest.js

@@ -55,6 +55,8 @@ const bodyContent = `
   <files-tooltip></files-tooltip>
 `;
 
+const windowEdgePadding = 6;
+
 function setUp() {
   /** @const {boolean} Assume files-ng in unittest. */
   const enableFilesNg = true;
@@ -108,7 +110,7 @@ function testFocus(callback) {
             assertEquals('Chocolate!', label.textContent.trim());
             assertTrue(tooltip.hasAttribute('visible'));
 
-            assertEquals('4px', tooltip.style.left);
+            assertEquals('6px', tooltip.style.left);
 
             if (window.isFilesNg()) {
               assertEquals('78px', tooltip.style.top);
@@ -124,8 +126,8 @@ function testFocus(callback) {
             assertEquals('Cherries!', label.textContent.trim());
             assertTrue(tooltip.hasAttribute('visible'));
 
-            const expectedLeft =
-                document.body.offsetWidth - tooltip.offsetWidth + 'px';
+            const expectedLeft = document.body.offsetWidth -
+                tooltip.offsetWidth - windowEdgePadding + 'px';
             assertEquals(expectedLeft, tooltip.style.left);
 
             if (window.isFilesNg()) {
@@ -154,7 +156,7 @@ function testHover(callback) {
             assertTrue(tooltip.hasAttribute('visible'));
             assertEquals(tooltip.getAttribute('aria-hidden'), 'false');
 
-            assertEquals('4px', tooltip.style.left);
+            assertEquals('6px', tooltip.style.left);
             if (window.isFilesNg()) {
               assertEquals('78px', tooltip.style.top);
             } else {
@@ -170,8 +172,8 @@ function testHover(callback) {
             assertEquals('Cherries!', label.textContent.trim());
             assertTrue(tooltip.hasAttribute('visible'));
 
-            const expectedLeft =
-                document.body.offsetWidth - tooltip.offsetWidth + 'px';
+            const expectedLeft = document.body.offsetWidth -
+                tooltip.offsetWidth - windowEdgePadding + 'px';
             assertEquals(expectedLeft, tooltip.style.left);
 
             if (window.isFilesNg()) {