Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the viewer CSS after nesting the findbar and secondary toolbar rules #18601

Merged
merged 3 commits into from
Aug 13, 2024

Conversation

timvandermeij
Copy link
Contributor

The commit messages contain more details about the individual changes.

Extracts a part of #18385.

timvandermeij and others added 3 commits August 12, 2024 20:04
Now that we have dedicated CSS scopes for the findbar and the secondary
toolbar we have ended up with two CSS blocks with identical selectors,
so now we can combine them for simplicity and to remove some rules in
the first block that were always overridden by the second block.

Co-authored-by: Calixte Denizet <[email protected]>
Using the `:is(a)` selector we can move the previously separate rules
into the main `.toolbarButton` override rules.

Co-authored-by: Calixte Denizet <[email protected]>
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 <[email protected]>
@timvandermeij
Copy link
Contributor Author

/botio-linux preview

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)


Received

Command cmd_preview from @timvandermeij received. Current queue size: 0

Live output at: http://54.241.84.105:8877/31587ee4f2dec90/output.txt

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)


Success

Full output at http://54.241.84.105:8877/31587ee4f2dec90/output.txt

Total script time: 1.03 mins

Published

@timvandermeij timvandermeij changed the title Clean up the viewer CSS after introducing CSS nesting for the findbar and secondary toolbar. Clean up the viewer CSS after introducing CSS nesting for the findbar and secondary toolbar Aug 12, 2024
@timvandermeij timvandermeij changed the title Clean up the viewer CSS after introducing CSS nesting for the findbar and secondary toolbar Improve the viewer CSS after nesting the findbar and secondary toolbar rules Aug 12, 2024
Copy link
Collaborator

@Snuffleupagus Snuffleupagus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This regression is a good example of why splitting that huge PR into manageable chunks is great, since it allows issues to be caught much easier. (And in the event that we need to bisect something in the future that's also possible this way.)

r=me, thank you!

@Snuffleupagus Snuffleupagus merged commit 038e482 into mozilla:master Aug 13, 2024
6 checks passed
@timvandermeij timvandermeij deleted the css-cleanup branch August 13, 2024 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants