Resolve "Add tweet button when highlighting text in the handbook"

Overview

When a user highlights text, pop up a twitter button. See #6027 (closed) for details.

Does this MR meet the acceptance criteria?

Tasks

• Link works as described in issue
• Tooltip disappears when clicking outside selection to remove it
• Tooltip disappears when clicking inside selection to remove it
• Tooltip does not disappear when clicking tweet link
• Tooltip moves when scrolling
• Tooltip switches to bottom/top of selection if top/bottom of selection is scrolled off screen
• Fix issue with CSS not working on review apps (and probably prod)
• Tooltip should flip to bottom when it hits header, not top of window
• BUG: Styling: arrow should work, including in all auto-flipping cases
• Only include css/js on handbook pages, not in head of every page.
• BUG: Making a new selection when there is already a selection results in orphaned/out-of-sync tooltip.
• Styling: Review colors/appearance
• BUG: Clicking on tooltip border while there is a selection makes selection go away but tooltip stays.
• Only enable tooltip for body of handbook docs (.md-page element)
• BUG: Tooltip is overlaid by link text when shown over right nav text, and is also unclickable (the nav link has precedence). This is no longer applicable since we only enable the tooltip for the body, not the table of contents.
• BUG(s): There are still some edge cases, some browser-specific, where the tooltip will not show up, or won't go away.
  • Firefox Developer Edition: Highlighting text, but doing the mouseup while over a link will not show the tooltip.
  • Chrome, Firefox Developer Edition, (others?): Highlighting items in the right nav menu in various ways has issues. Sometimes the tooltip will not show, sometimes it will show in the wrong position, sometimes it will not go away when the highlight is gone. Doesn't seem to happen in Safari. This is no longer applicable since we only enable the tooltip for the body, not the table of contents.
• BUG: tweet does not show text if current URL ends in an anchor.
• BUG: Using shift-arrow keys to highlight selection doesn't move tooltip
• BUG: Shift-clicking inside an existing selection makes tooltip go away while selection still exists
• Refactor: use a timeout of zero to get around problem of selection still existing when mouse event happens (see !38478 (comment 291813016)) Moved to follow-on issue #6662
• BUG: With the keyboard it's possible to do an empty selection, but the tooltip does not disappear. See !38478 (comment 291826959) Moved to follow-on issue #6664
• Backfill tests Moved to follow-on issue #6640
• Mobile Support: Currently does not work at all on mobile (probably needs different event handlers).
• Styling: Review CSS for compliance to standards, DRY up verbose class names with SCSS nesting where possible. Moved to follow-on issue #6639
• Cross-browser testing:
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE (what versions do we support?)
  • Mobile Android
  • Mobile Apple

Details on Firefox onclick bug

Description

In Firefox (Developer Edition 73.0b4), when you do a mouse drag to create selection to highlighting text, but the mouseup to end the selection while over a link, the tooltip does not show.

This bug does not occur on Chrome or Safari.

Steps to Reproduce

To reproduce:

• Go to a page like /handbook/values
• Drag and highlight a header, such as "About our Values", and end the drag and release the mouse over the "chain" anchor link at the end of the header

Expected:

• Tooltip shows

Actual:

• Tooltip does not show

Screencast

firefox-highlight-tooltip-bug

Details

The reason this is happening is that the click event is not fired in this case (it is in Chrome and Safari).

This sounds like a Firefox bug, because it is not following the description of the Click event on MDN:

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.

The workaround for this was to listen to mouseup event instead of the 'click', and use it to trigger the tooltip behavior. This seems to have no negative impact on the other browsers.

Conformity

• Added description to this MR explaining the reasons for the proposed change, per say-why-not-just-what

Closes #6027 (closed)