Tooltip: improve positioning in fallback case

Simple tooltips try to position themselves to the bottom center or top
center of their anchor. If neither of those options lie fully within
the viewport, pick a fallback position:

- Check whether top or bottom position is better, by picking the
  option which is vertically out-of-bounds by a smaller amount.
- The tooltip position is then adjusted by moving it into the
  viewport. This means the tooltip is allowed to cover its anchor in
  the fallback case.

Rich Tooltips try to position themselves to the bottom/top left/right
of their anchor. If none of these 4 positions lie fully within the
viewport, a fallback position is calculated:

- Check whether top or bottom position is better, by picking the
  option which is vertically out-of-bounds by a smaller amount.
- Choose left/right according to the preferred order.
- The tooltip position is then adjusted such that the tooltip stays in
  the same corner of the viewport, but is moved into the viewport.
  This means the tooltip is allowed to cover its anchor in the
  fallback case.

Fixed: 454879285
Change-Id: Ic3338c14ef8091ca4500f6fd290b3b0af1d78d5a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7105438
Commit-Queue: Wolfgang Beyer <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>

Author: wolfib

front_end/ui/components/tooltips/Tooltip.test.ts

@@ -418,4 +418,139 @@ describe('Tooltip', () => {
     assert.exists(tooltip3);
     assert.isTrue(tooltip3.open);
   });
+
+  describe('assigns the correct position', () => {
+    const inspectorViewRect = {
+      top: 0,
+      bottom: 290,
+      height: 290,
+      left: 0,
+      right: 500,
+      width: 500,
+    } as DOMRect;
+    const anchorRect = {
+      top: 100,
+      bottom: 200,
+      height: 100,
+      left: 200,
+      right: 400,
+      width: 200,
+    } as DOMRect;
+
+    it('for default postion bottom span right', () => {
+      const currentPopoverRect = {
+        height: 80,
+        width: 160,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 200);
+      assert.strictEqual(proposedRect.left, 200);
+    });
+
+    it('for preferred postion bottom span left', () => {
+      const currentPopoverRect = {
+        height: 80,
+        width: 160,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip({
+        inspectorViewRect,
+        anchorRect,
+        currentPopoverRect,
+        preferredPositions: [Tooltips.Tooltip.PositionOption.BOTTOM_SPAN_LEFT]
+      });
+      assert.strictEqual(proposedRect.top, 200);
+      assert.strictEqual(proposedRect.left, 240);
+    });
+
+    it('uses 2nd option from default order if 1st is impossible', () => {
+      const currentPopoverRect = {
+        height: 80,
+        width: 350,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 200);
+      assert.strictEqual(proposedRect.left, 50);
+    });
+
+    it('uses 3rd option from default order if first 2 are impossible', () => {
+      const currentPopoverRect = {
+        height: 95,
+        width: 160,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 5);
+      assert.strictEqual(proposedRect.left, 200);
+    });
+
+    it('uses 4th option from default order if first 3 are impossible', () => {
+      const currentPopoverRect = {
+        height: 95,
+        width: 350,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 5);
+      assert.strictEqual(proposedRect.left, 50);
+    });
+
+    it('uses 4th option from preferred order if first 3 are impossible', () => {
+      const currentPopoverRect = {
+        height: 95,
+        width: 350,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip({
+        inspectorViewRect,
+        anchorRect,
+        currentPopoverRect,
+        preferredPositions:
+            [Tooltips.Tooltip.PositionOption.BOTTOM_SPAN_LEFT, Tooltips.Tooltip.PositionOption.TOP_SPAN_LEFT]
+      });
+      assert.strictEqual(proposedRect.top, 5);
+      assert.strictEqual(proposedRect.left, 50);
+    });
+
+    it('moves the rect into the viewport if all 4 options are impossible', () => {
+      const currentPopoverRect = {
+        height: 110,
+        width: 440,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 0);
+      assert.strictEqual(proposedRect.left, 60);
+    });
+
+    it('for anchors in a corner of the viewport', () => {
+      const anchorBottomLeftCorner = {
+        top: 190,
+        bottom: 290,
+        height: 100,
+        left: 0,
+        right: 100,
+        width: 100,
+      } as DOMRect;
+      const currentPopoverRect = {
+        height: 100,
+        width: 200,
+      } as DOMRect;
+      const proposedRect = Tooltips.Tooltip.proposedRectForRichTooltip(
+          {inspectorViewRect, anchorRect: anchorBottomLeftCorner, currentPopoverRect, preferredPositions: []});
+      assert.strictEqual(proposedRect.top, 90);
+      assert.strictEqual(proposedRect.left, 0);
+    });
+
+    it('moves a simple tooltip into the viewport', () => {
+      const currentPopoverRect = {
+        height: 95,
+        width: 410,
+      } as DOMRect;
+      const proposedRect =
+          Tooltips.Tooltip.proposedRectForSimpleTooltip({inspectorViewRect, anchorRect, currentPopoverRect});
+      assert.strictEqual(proposedRect.top, 5);
+      assert.strictEqual(proposedRect.left, 90);
+    });
+  });
 });

front_end/ui/components/tooltips/Tooltip.ts

@@ -21,7 +21,7 @@ interface PositioningParams {
   currentPopoverRect: DOMRect;
 }
 
-enum PositionOption {
+export enum PositionOption {
   BOTTOM_SPAN_RIGHT = 'bottom-span-right',
   BOTTOM_SPAN_LEFT = 'bottom-span-left',
   TOP_SPAN_RIGHT = 'top-span-right',
@@ -66,29 +66,32 @@ const positioningUtils = {
     };
   },
   // Adjusts proposed rect so that the resulting popover is always inside the inspector view bounds.
-  insetAdjustedRect:
-      ({inspectorViewRect, anchorRect, currentPopoverRect, proposedRect}:
-           {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}):
-          ProposedRect => {
-            if (inspectorViewRect.left > proposedRect.left) {
-              proposedRect.left = inspectorViewRect.left;
-            }
-
-            if (inspectorViewRect.right < proposedRect.left + currentPopoverRect.width) {
-              proposedRect.left = inspectorViewRect.right - currentPopoverRect.width;
-            }
-
-            if (proposedRect.top + currentPopoverRect.height > inspectorViewRect.bottom) {
-              proposedRect.top = anchorRect.top - currentPopoverRect.height;
-            }
-            return proposedRect;
-          },
+  insetAdjustedRect: ({inspectorViewRect, currentPopoverRect, proposedRect}:
+                          {inspectorViewRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}):
+      ProposedRect => {
+        if (inspectorViewRect.left > proposedRect.left) {
+          proposedRect.left = inspectorViewRect.left;
+        }
+
+        if (inspectorViewRect.right < proposedRect.left + currentPopoverRect.width) {
+          proposedRect.left = inspectorViewRect.right - currentPopoverRect.width;
+        }
+
+        if (proposedRect.top < inspectorViewRect.top) {
+          proposedRect.top = inspectorViewRect.top;
+        }
+
+        if (proposedRect.top + currentPopoverRect.height > inspectorViewRect.bottom) {
+          proposedRect.top = inspectorViewRect.bottom - currentPopoverRect.height;
+        }
+        return proposedRect;
+      },
   isInBounds: ({inspectorViewRect, currentPopoverRect, proposedRect}:
                    {inspectorViewRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}): boolean => {
-    return inspectorViewRect.left < proposedRect.left &&
-        proposedRect.left + currentPopoverRect.width < inspectorViewRect.right &&
-        inspectorViewRect.top < proposedRect.top &&
-        proposedRect.top + currentPopoverRect.height < inspectorViewRect.bottom;
+    return inspectorViewRect.left <= proposedRect.left &&
+        proposedRect.left + currentPopoverRect.width <= inspectorViewRect.right &&
+        inspectorViewRect.top <= proposedRect.top &&
+        proposedRect.top + currentPopoverRect.height <= inspectorViewRect.bottom;
   },
   isSameRect: (rect1: DOMRect|null, rect2: DOMRect|null): boolean => {
     if (!rect1 || !rect2) {
@@ -100,7 +103,7 @@ const positioningUtils = {
   }
 };
 
-const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
+export const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
   inspectorViewRect: DOMRect,
   anchorRect: DOMRect,
   currentPopoverRect: DOMRect,
@@ -116,53 +119,74 @@ const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopov
     ]),
   ];
 
-  // Tries the positioning options in the order given by `uniqueOrder`.
-  // If none of them work out, we default to showing the tooltip in the bottom right and adjust
-  // its insets so that the tooltip is inside the inspector view bounds.
-  for (const positionOption of uniqueOrder) {
-    let proposedRect;
+  const getProposedRectForPositionOption = (positionOption: PositionOption): ProposedRect => {
     switch (positionOption) {
       case PositionOption.BOTTOM_SPAN_RIGHT:
-        proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
       case PositionOption.BOTTOM_SPAN_LEFT:
-        proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
       case PositionOption.TOP_SPAN_RIGHT:
-        proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
       case PositionOption.TOP_SPAN_LEFT:
-        proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
+        return positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
     }
+  };
+
+  // Tries the positioning options in the order given by `uniqueOrder`.
+  for (const positionOption of uniqueOrder) {
+    const proposedRect = getProposedRectForPositionOption(positionOption);
     if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
       return proposedRect;
     }
   }
 
-  // If none of the options work above, we position to bottom right
-  // and adjust the insets so that it does not go out of bounds.
-  const proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-  return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+  // If none of the options above work, we decide between top or bottom by which
+  // option is fewer vertical pixels out of the viewport. We pick left/right
+  // according to `uniqueOrder`. And finally we adjust the insets so that the
+  // tooltip is not out of bounds.
+  const bottomProposed = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+  const bottomVerticalOutOfBounds =
+      Math.max(0, bottomProposed.top + currentPopoverRect.height - inspectorViewRect.bottom);
+  const topProposed = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
+  const topVerticalOutOfBounds = Math.max(0, inspectorViewRect.top - topProposed.top);
+  const prefersBottom = bottomVerticalOutOfBounds <= topVerticalOutOfBounds;
+  const fallbackOption = uniqueOrder.find(option => {
+    if (prefersBottom) {
+      return option === PositionOption.BOTTOM_SPAN_LEFT || option === PositionOption.BOTTOM_SPAN_RIGHT;
+    }
+    return option === PositionOption.TOP_SPAN_LEFT || option === PositionOption.TOP_SPAN_RIGHT;
+  }) ??
+      PositionOption.TOP_SPAN_RIGHT;
+  const fallbackRect = getProposedRectForPositionOption(fallbackOption);
+  return positioningUtils.insetAdjustedRect({currentPopoverRect, inspectorViewRect, proposedRect: fallbackRect});
 };
 
-const proposedRectForSimpleTooltip =
+export const proposedRectForSimpleTooltip =
     ({inspectorViewRect, anchorRect, currentPopoverRect}:
          {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
       // Default options are bottom centered & top centered.
       let proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
       if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
         return proposedRect;
       }
+      const bottomVerticalOutOfBoundsAmount =
+          Math.max(0, proposedRect.top + currentPopoverRect.height - inspectorViewRect.bottom);
 
       proposedRect = positioningUtils.topCentered({anchorRect, currentPopoverRect});
       if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
         return proposedRect;
       }
-
-      // The default options did not work out, so position it to bottom center
-      // and adjust the insets to make sure that it does not go out of bounds.
-      proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
-      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+      const topVerticalOutOfBoundsAmount = Math.max(0, inspectorViewRect.top - proposedRect.top);
+
+      // The default options did not work out, so compare which option is fewer
+      // pixels out of the viewport vertically. Pick the better option and
+      // adjust the insets to make sure that the tooltip is not out of bounds.
+      if (bottomVerticalOutOfBoundsAmount <= topVerticalOutOfBoundsAmount) {
+        proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
+      } else {
+        proposedRect = positioningUtils.topCentered({anchorRect, currentPopoverRect});
+      }
+      return positioningUtils.insetAdjustedRect({currentPopoverRect, inspectorViewRect, proposedRect});
     };
 
 export type TooltipVariant = 'simple'|'rich';