Last modified: 2014-09-04 14:59:46 UTC
People complain about clicking the topic bar to collapse/expan, e.g. bug 58661, partly because it doesn't act like a button, . We intend the topic bar should act like a giant button by giving it the class .mw-ui-button, so it gets the beveled bottom edge on hover. However, it doesn't darken on click because its gray background color from .flow-titlebar background has a greater specificity than the dark gray background in .mw-ui-button:active styling. The fix might be to give flow-titlebar its own :active background color, to somehow turn off its gray background when active, or to jiggle the specificity so mw-ui-button:active wins. It doesn't help that Flow loads its CSS twice, once with addModuleStyles() and then again with addModules(); this is wrong and wasteful, though I'm not sure if CSS actually loads twice. Also, the flow title-bar div doesn't have a title="Click to collapse/expand" to hint at its behavior
The WMF core features team tracks this bug on Mingle card https://mingle.corp.wikimedia.org/projects/flow/cards/649, but people from the community are welcome to contribute here and in Gerrit.
(In reply to spage from comment #0) > [..] so mw-ui-button:active wins. It doesn't help that Flow loads > its CSS twice, once with addModuleStyles() and then again with addModules(); > this is wrong and wasteful, though I'm not sure if CSS actually loads twice. > It is loaded, parsed and applied twice. See bug 61305.
What should the :active color be? Also: since this bug report, we've added the collapse toggles, so this specific issue might be less important (now that we have those other buttons to toggle the topics)
