Remove the secondaryToolbarButton CSS class
#18596
Conversation
|
/botio-linux preview |
From: Bot.io (Linux m4)ReceivedCommand cmd_preview from @timvandermeij received. Current queue size: 0 Live output at: http://54.241.84.105:8877/98b8fb83b3be0fd/output.txt |
From: Bot.io (Linux m4)SuccessFull output at http://54.241.84.105:8877/98b8fb83b3be0fd/output.txt Total script time: 1.02 mins Published |
timvandermeij
force-pushed
the
css-secondary-toolbar-part-2
branch
from
f633db9
to
f22c7a4
Compare
|
/botio-linux preview |
From: Bot.io (Linux m4)ReceivedCommand cmd_preview from @timvandermeij received. Current queue size: 0 Live output at: http://54.241.84.105:8877/3b92cec1105f329/output.txt |
From: Bot.io (Linux m4)SuccessFull output at http://54.241.84.105:8877/3b92cec1105f329/output.txt Total script time: 1.02 mins Published |
|
In the |
Secondary toolbar buttons are toolbar buttons with some extra rules, mainly to make them wider and have visible labels. However, this similarity is currently not clearly reflected in the implementation because the secondary toolbar buttons use a different CSS class, `secondaryToolbarButton`, compared to the other toolbar buttons that use the `toolbarButton` CSS class. This also causes some duplication in the rules and requires extra care to keep the common bits for the `secondaryToolbarButton` class in sync with the `toolbarButton` class. Fortunately, now that we have a dedicated CSS scope for the secondary toolbar, we can simplify this by giving all secondary toolbar buttons the `toolbarButton` class and explicitly listing the required overrides in the `#secondaryToolbar` scope instead. Doing so removes most of the special-casing for secondary toolbar buttons while explicitly listing the differences in a single place for a better overview. It also lays the foundation for making all toolbar buttons respect the `browser.uidensity` Firefox preference later by reducing differences. Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
timvandermeij
force-pushed
the
css-secondary-toolbar-part-2
branch
from
f22c7a4
to
2a22424
Compare
|
Good catch! The original rule only overrode the secondary toolbar button style for the non-toggled case but I forgot to take that along in the new rule. This is fixed in the new commit and hovering over the toolbar buttons is now the same as before again. /botio-linux preview |
From: Bot.io (Linux m4)ReceivedCommand cmd_preview from @timvandermeij received. Current queue size: 0 Live output at: http://54.241.84.105:8877/3f84cec2ce362f4/output.txt |
From: Bot.io (Linux m4)SuccessFull output at http://54.241.84.105:8877/3f84cec2ce362f4/output.txt Total script time: 1.03 mins Published |
| } | ||
| } | ||
|
|
||
| a.toolbarButton { |
There was a problem hiding this comment.
Could this be moved into the .toolbarButton block above?
This commit fixes a regression from mozilla#18596 where the "Add image" button styles broke because it's a labeled toolbar button but the labeled toolbar button CSS rules were only scoped to the secondary toolbar. However, nowadays labeled toolbar buttons are also used in e.g. the editor parameters toolbar, and this highlighted that we didn't clearly encode the concept of labeled toolbar buttons in the CSS so far. This patch extracts the CSS rules for labeled toolbar buttons that were previously limited to the secondary toolbar into a dedicated generic class that can be applied on top of any unlabeled toolbar button to convert it to a labeled toolbar button, regardless of its position in the DOM. This also makes the distinction clearer in the HTML, and the new CSS scope for the toolbar buttons lays the foundation for combining the other toolbar buttons rules in there later on. Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
Secondary toolbar buttons are toolbar buttons with some extra rules, mainly to make them wider and have visible labels. However, this similarity is currently not clearly reflected in the implementation because the secondary toolbar buttons use a different CSS class,
secondaryToolbarButton, compared to the other toolbar buttons that use thetoolbarButtonCSS class. This also causes some duplication in the rules and requires extra care to keep the common bits for thesecondaryToolbarButtonclass in sync with thetoolbarButtonclass.Fortunately, now that we have a dedicated CSS scope for the secondary toolbar, we can simplify this by giving all secondary toolbar buttons the
toolbarButtonclass and explicitly listing the required overrides in the#secondaryToolbarscope instead. Doing so removes most of the special-casing for secondary toolbar buttons while explicitly listing the differences in a single place for a better overview. It also lays the foundation for making all toolbar buttons respect thebrowser.uidensityFirefox preference later by reducing differences.Extracts a part of #18385.