Skip to content

Re-factor the loading-icons used in the viewer toolbars #17287

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

Merged
merged 1 commit into from
Nov 21, 2023

Conversation

Snuffleupagus
Copy link
Collaborator

@Snuffleupagus Snuffleupagus commented Nov 16, 2023

Currently the SVG images for the loading-icons exist in two versions, for the light- respectively dark-theme, which nowadays are the only "duplicated" icons left.
The reason for this is that these icons are being used in input-elements, where the regular mask-image approach used for all buttons don't work.

To address this we add containers for the input-elements, such that we have a "regular" DOM-element where we can use mask-image.

Edit: This reduces the size of the gulp mozcentral output by 1.5 kilo-bytes, which isn't a lot but still cannot hurt.

Copy link
Contributor

@calixteman calixteman left a comment

Choose a reason for hiding this comment

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

LGTM. Thank you.

@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@Snuffleupagus Snuffleupagus force-pushed the CSS-loading-icon branch 2 times, most recently from d9ecbdb to 5b2d8b9 Compare November 21, 2023 11:06
Currently the SVG images for the loading-icons exist in two versions, for the light- respectively dark-theme, which nowadays are the only "duplicated" icons left.
The reason for this is that these icons are being used in `input`-elements, where the regular `mask-image` approach used for all buttons don't work.

To address this we add containers for the `input`-elements, such that we have a "regular" DOM-element where we can use `mask-image`.
@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@mozilla mozilla deleted a comment from moz-tools-bot Nov 21, 2023
@Snuffleupagus
Copy link
Collaborator Author

/botio-linux preview

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)


Received

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

Live output at: http://54.241.84.105:8877/20c0f6eddeea22b/output.txt

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)


Success

Full output at http://54.241.84.105:8877/20c0f6eddeea22b/output.txt

Total script time: 1.41 mins

Published

Copy link
Contributor

@calixteman calixteman left a comment

Choose a reason for hiding this comment

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

A way better like this: I appreciate.
I tested with the preview in light/dark mode and in ltr/rtl mode and everything is ok.
LGTM. Thank you.

@Snuffleupagus Snuffleupagus merged commit 83f0029 into mozilla:master Nov 21, 2023
@Snuffleupagus Snuffleupagus deleted the CSS-loading-icon branch November 21, 2023 13:11
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