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: Reconcile "Edit" toolbar option with local tasks (tabs) and contextual links for editing
- 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:
- In the former case:
.js .toolbar .bar .tab,
.js .toolbar .menu li {
display: block;
} - 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.
