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

Add event listeners passive for fotorama lib improves lighthouse metrics #31080

Conversation

mrtuvn
Copy link
Contributor

@mrtuvn mrtuvn commented Nov 27, 2020

Description (*)

Improve lighthouse metrics score for fotorama js lib

Screenshot from 2020-11-27 22-30-28

Related Pull Requests

Fixed Issues (if relevant)

  1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

  1. ...
  2. ...

Questions or comments

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)

Resolved issues:

  1. resolves [Issue] Add event listeners passive for fotorama lib improves lighthouse metrics #31140: Add event listeners passive for fotorama lib improves lighthouse metrics

@m2-assistant
Copy link

m2-assistant bot commented Nov 27, 2020

Hi @mrtuvn. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

  • @magento give me test instance - deploy test instance based on PR changes
  • @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

  • @magento run all tests - run or re-run all required tests against the PR changes
  • @magento run <test-build(s)> - run or re-run specific test build(s)
    For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

  1. Database Compare
  2. Functional Tests CE
  3. Functional Tests EE,
  4. Functional Tests B2B
  5. Integration Tests
  6. Magento Health Index
  7. Sample Data Tests CE
  8. Sample Data Tests EE
  9. Sample Data Tests B2B
  10. Static Tests
  11. Unit Tests
  12. WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

@ihor-sviziev
Copy link
Contributor

@magento run all tests

@ihor-sviziev
Copy link
Contributor

@magento run Functional Tests B2B

Copy link
Contributor

@ihor-sviziev ihor-sviziev left a comment

Choose a reason for hiding this comment

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

✔ Approved.

Failing tests looks not related to changes form this PR.

@magento-engcom-team
Copy link
Contributor

Hi @ihor-sviziev, thank you for the review.
ENGCOM-8494 has been created to process this Pull Request

@ihor-sviziev ihor-sviziev added the Area: Perf/Frontend All tickets related with improving frontend performance. label Nov 30, 2020
@sidolov sidolov added the Priority: P3 May be fixed according to the position in the backlog. label Dec 2, 2020
@sidolov
Copy link
Contributor

sidolov commented Dec 2, 2020

@magento create issue

@ihor-sviziev
Copy link
Contributor

@magento run Functional Tests B2B

@mrtuvn
Copy link
Contributor Author

mrtuvn commented Dec 14, 2020

@magento run Functional Tests B2B

@ihor-sviziev ihor-sviziev mentioned this pull request Mar 30, 2021
16 tasks
@gabrieldagama gabrieldagama added Priority: P2 A defect with this priority could have functionality issues which are not to expectations. and removed Priority: P3 May be fixed according to the position in the backlog. labels Apr 6, 2021
@m2-community-project m2-community-project bot added Progress: accept Priority: P3 May be fixed according to the position in the backlog. and removed Progress: ready for testing labels Apr 9, 2021
@magento-engcom-team magento-engcom-team merged commit 2f5b57a into magento:2.4-develop Apr 11, 2021
@m2-assistant
Copy link

m2-assistant bot commented Apr 11, 2021

Hi @mrtuvn, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

@glevhen
Copy link

glevhen commented Oct 8, 2021

@ihor-sviziev this PR cause js errors on the product page when swipe fotorama product images (touch events), please ensure you make swipe via touch events (use chrome mobile device emulation or real devices for testing)
image
fotorama.js:1222 Unable to preventDefault inside passive event listener invocation.
Created issue #34282

@ihor-sviziev
Copy link
Contributor

@mrtuvn, could you check it?

@mrtuvn
Copy link
Contributor Author

mrtuvn commented Oct 8, 2021

I think this may related with jquery too

@glevhen
Copy link

glevhen commented Oct 8, 2021

@mrtuvn this is because of this change
2f5b57a#diff-c4a96bcd0b56dc98fdc1c5af6c8a86d6560587bbc80caabe9b3ccabd047675d0
the eventListener options passive was set to true, that's cause js error when fotorama call e.preventDefault
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters

event listener option passive

A boolean value that, if true, indicates that the function specified by listener will never call preventDefault().

@mrtuvn
Copy link
Contributor Author

mrtuvn commented Oct 8, 2021

https://github.com/magento/magento2/pull/34162/files#diff-ce58a428085808b85d9b7ef9d673d944a80f1d841a2e8320d691314597d624f5
Already did some that here
Maybe we need some change for fotorama too

@glevhen
Copy link

glevhen commented Oct 8, 2021

@mrtuvn thank you for hint, will check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Lib/Frontend Area: Perf/Frontend All tickets related with improving frontend performance. Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Award: bug fix Award: category of expertise Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Priority: P3 May be fixed according to the position in the backlog. Progress: accept QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope Release Line: 2.4 Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. Type: Feature/Improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Issue] Add event listeners passive for fotorama lib improves lighthouse metrics
7 participants