UI submenus are styled by listing their individual classes, making custom menus more difficult

[joeyparrish]

Have you read the FAQ and checked for duplicate open issues?
Yes

What version of Shaka Player are you using?
master

Can you reproduce the issue with our latest release version?
yes

Can you reproduce the issue with the latest code from master?
yes

Are you using the demo app or your own custom app?
custom

If custom app, can you reproduce the issue using our demo app?
yes

What browser and OS are you using?
ChromeOS 86 stable

What are the manifest and license server URIs?
N/A

What did you do?

Register a custom element to the overflow menu, subclassing SettingsMenu for the submenu.

What did you expect to happen?
The styling of it should be like the built-in submenus

What actually happened?
The margins set in the default CSS for submenus list them individually:

/* These three submenus have somewhat different margins inside them.
 * TODO: This is all submenus, but not the top-level menu.  Is there a better
 * way to express this? */
.shaka-resolutions,
.shaka-audio-languages,
.shaka-text-languages,
.shaka-playback-rates {
  span {
    /* TODO(b/116651454): eliminate hard-coded offsets */
    margin-left: 54px;

Apps could register their own submenus and add their own CSS to match this margin, but this is brittle if we change the default styling. We should make these styles more generic.

The only real issue is that the main overflow menu uses the class shaka-settings-menu, when it should probably leave that to submenus. This should be easy to fix.