feat(ui): Add tooltips to control panel buttons

[nbcl]

The present pull request aims to provide a solution to #3269 (Add hover tooltips to control panel buttons) by adding configurable tooltips to control panel buttons.

Fixes: #3269

Example

How to preview

Initialize the client with a config that sets the enableTooltips option to true.

const config = {
    'enableTooltips': true
};
ui.configure(config);

Changelog

docs/tutorials/ui-customization.md

Adds a brief description and example for the enableTooltips configuration.

ui/airplay_button.js, ui/fullscreen_button.js, ui/cast_button.js, ui/loop_button.js, ui/mute_button.js, ui/overflow_menu.js, ui/small_play_button.js

Adds a regular tooltip, based on the aria-label attribute of the button.

ui/audio_language_selection.js, ui/fast_forward_button.js ui/playback_rate_selection.js, ui/resolution_selection.js, ui/rewind_button.js, ui/text_selection.js

Adds a status tooltip, based on the aria-label and shaka-status attributes of the button.

As defined on ui/less/tooltip.less, the content of the tooltip will be displayed as "aria-label (shaka-status)", with the status attribute updated every time a different selection on the button is made.

On same cases, a selection is not made by default, so a default shaka-status is added.

ui/controls.js

Adds the .shaka-tooltips-on class to the control panel when enableTooltips is set to true.

ui/controls.less

Imports the new tooltip.less file.

ui/externs/ui.js

Adds the enableTooltips option to the configuration.

ui/tooltip.less

A new tooltip class is added.

It uses the aria-label and shaka-status attributes as content inside the after pseudo-element, and is positioned centered on top of the recipient buttons on hover, focus-visible and active.

button:first-child and button:last-child selectors are adapted to maintain the first and last tooltips inside the control panel margin, overriding the original centering on top.

Tooltips are only present when enableTooltips is set to true, and have .shaka-tooltips-on as a parent, and will not appear in the overflow menu.

ui/ui.js

Defaults the enableTooltips configuration option to false.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code
• I have made the corresponding changes to the documentation
• My changes generate no new warnings
• I have run ./build/all.py and the build passes
• I have run ./build/test.py and all tests pass

[nbcl]

@joeyparrish, I would really appreciate your thoughts regarding everything we discussed! 🙂

[shaka-bot]

All tests passed!

[theodab]

We try to avoid using setAttribute in the project proper (e.g. not the demo) whenever possible, as it can be a vector for XSS attacks. More to the point, each time we use it, we need to apply for an exception for an internal Google tool that warns about vectors for XSS attacks.
However, I checked, and I think we happen to already have an exception for every file you have added a setAttribute call to. I suppose because they all used to use setAttribute for ARIA?
So it's not actually a problem here, though it could come up if we add tooltips to a new button.

Anyway, besides that, looks good to me.