Toolbar's CSS has too specific selectors

Problem/Motivation

An example: you want to have a toolbar tab that is initially hidden, and JS can make it available if some condition is fulfilled.

Examples:

• contextual.module's "show pencils" toggle, introduced at #1874664: Introduce toolbar level "Edit" mode that shows all contextual links
• tour.module's "tour" button, being introduced at #1809352: Write tour.module and add it to core

Just setting class="element-hidden" on either the tab wrapper (via #wrapper_attributes) or on the tab itself (via #attributes) is insufficient, because:

1. In the former case:
   

   .js .toolbar .bar .tab,
   .js .toolbar .menu li {
     display: block;
   }
   

2. In the latter case:
   

   .js .toolbar a {
     display: block;
   }
   

Both of those are more specific than .element-hidden { display: none; }, hence it doesn't work. This implies we must start adding CSS like this to make it work:

.js .toolbar .bar .contextual-toolbar-tab.tab.element-hidden {
  display: none;
}

More generally speaking, why is it necessary to have such specific selectors: .js .toolbar .bar .tab?

Proposed resolution

Figure out whether this is necessary, and very likely it is, but in that case, it should be clearly documented why this is the case; preferably at the top of toolbar.base.css.

Remaining tasks

TBD>

User interface changes

None.

API changes

None.